背景图像拉伸以填充 - CSS

在网页设计中，背景图像是经常使用的一种元素。其中，背景图像在使用时，需要满足图片大小与网页容器大小的匹配问题。当背景图像在容器中的大小与容器不匹配时，就需要对背景图像进行拉伸以填充容器。下面介绍如何使用 CSS 对背景图像进行拉伸以填充。

CSS 属性 background-size

background-size 属性用于设置背景图像的大小。默认情况下，背景图像的大小是自适应容器大小的。当需要对背景图像进行拉伸以填充容器时，可以使用 background-size 属性。

值

background-size 属性的可选值如下：

• auto: 默认值。表示自适应容器大小。
• contain: 将背景图像等比缩放以适应容器大小。(等比缩放，可能纵向或横向会留白)
• cover: 将背景图像等比拉伸以填充容器。(没有留白)

示例

下面是一个简单的示例，展示如何使用 background-size 属性进行背景图像拉伸以填充。

/* html */
<div class="container"></div>

/* CSS */
.container {
  width:300px;
  height:200px;
  background:url("image.jpg");
  background-size:cover;
}

上述示例中，将一个背景图像绑定到 div 元素中，并使用 background-size:cover 属性让它等比拉伸以填充 div 元素。

CSS 属性 background-position

background-position 属性用于设置背景图像在容器中的位置。当背景图像大小与容器大小不匹配时，使用此属性可以调整背景图像在容器中的位置。

值

background-position 属性的可选值如下：

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom
• x% y%: x% 表示从左侧开始，相对于容器宽度的百分比，y% 表示从顶部开始，相对于容器高度的百分比。如 50% 50% 表示背景图像 positioned 在元素的中心点。

示例

下面是一个简单的示例，展示如何使用 background-position 属性调整背景图像在容器中的位置。

/* html */
<div class="container"></div>

/* CSS */
.container {
  width:300px;
  height:200px;
  background:url("image.jpg");
  background-size:cover;
  background-position:center center;
}

上述示例中，将一个背景图像绑定到 div 元素中，并使用 background-position:center center 属性将背景图像 positioned 到元素的中心点。

总结

这篇文章介绍了如何使用 CSS 对背景图像拉伸以填充容器。通过学习 background-size 和 background-position 这两个属性的使用方法，可以简单而有效地实现网页中的背景图像拉伸以填充容器效果。