CSS 背景图适应 div

在本文中，我们将介绍如何使用 CSS 将背景图片适应到 div 元素中。

阅读更多：CSS 教程

背景图和 div 元素

在网页设计中，我们经常使用背景图来美化页面。而 div 元素则是在网页布局中常用的容器。将背景图适应到 div 元素中，可以实现丰富的页面设计效果。

使用 background-size 属性

CSS 中的 background-size 属性可以控制背景图片的尺寸。通过设置合适的值，我们可以将背景图适应到 div 元素中。

cover 值

当我们希望背景图能够完全覆盖 div 元素时，可以将 background-size 设置为 cover。这样背景图会等比例缩放，直至完全覆盖 div 元素的整个区域。示例代码如下：

div {
  background-image: url('background.jpg');
  background-size: cover;
}

contain 值

如果我们希望背景图完整地显示在 div 元素中，并保持其原始宽高比，可以将 background-size 设置为 contain。这样背景图会等比例缩放，直至完全显示在 div 元素内。示例代码如下：

div {
  background-image: url('background.jpg');
  background-size: contain;
}

使用 background-position 属性

除了调整背景图片的尺寸外，我们还可以使用 background-position 属性来控制背景图在 div 元素中的位置。

利用百分比

通过设置 background-position 的值为百分比，我们可以将背景图在纵、横方向上相对于 div 元素进行定位。例如，将背景图在水平方向上居中，可以设置 background-position 的值为 50%。示例代码如下：

div {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: 50% 0%;
}

利用关键字

除了百分比外，background-position 还支持一些关键字值。例如，我们可以使用关键字 center 来将背景图在水平和垂直方向上都居中。示例代码如下：

div {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
}

使用 background-repeat 属性

如果背景图的尺寸小于 div 元素，则可能需要重复平铺以填充整个 div 区域。在这种情况下，我们可以使用 background-repeat 属性。

repeat-x 值

通过将 background-repeat 设置为 repeat-x，背景图会在水平方向上重复平铺以填满 div 元素。示例代码如下：

div {
  background-image: url('background.jpg');
  background-repeat: repeat-x;
}

repeat-y 值

与之类似，设置 background-repeat 为 repeat-y 可以使背景图在垂直方向上重复平铺。示例代码如下：

div {
  background-image: url('background.jpg');
  background-repeat: repeat-y;
}

总结

通过使用 CSS 的 background-size、background-position 和 background-repeat 属性，我们可以将背景图片适应到 div 元素中。通过调整这些属性的值，可以实现不同的背景布局效果。在网页设计中灵活运用这些属性，可以帮助我们实现丰富多样的页面布局和装饰效果。