[分享]css中将图片一张铺满背景

CSS是一种用于网页布局和样式的语言，它常常用于美化页面的元素，比如将图片铺满背景。在CSS中，我们可以使用background属性来控制背景的样式，包括颜色、图片和尺寸等。下面我们来详细介绍如何将一...

CSS是一种用于网页布局和样式的语言，它常常用于美化页面的元素，比如将图片铺满背景。在CSS中，我们可以使用background属性来控制背景的样式，包括颜色、图片和尺寸等。下面我们来详细介绍如何将一张图片铺满背景。

/* HTML代码 */
<div class="bg-img"></div>

/* CSS代码 */
.bg-img {
  background-image: url("image.jpg"); /* 添加图片 */
  background-size: cover; /* 进行铺满 */
} 

上面的代码中，我们使用了CSS中的background-image属性来添加一张图片作为背景。接着，我们使用background-size属性来让图片铺满整个背景。其中，cover是一个常用的取值，它可以确保图片完全覆盖背景，并保持比例不变。

如果我们想要让图片不变形，可以使用contain取值，代码如下：

.bg-img {
  background-image: url("image.jpg");
  background-size: contain; /* 图片不变形 */
  background-repeat: no-repeat; /* 禁止重复 */
  background-position: center; /* 居中显示 */
} 

在上面的代码中，我们使用了contain来保持图片不变形，并使用了background-repeat和background-position属性来分别禁止背景图片重复和居中显示。

如果我们想要针对不同的屏幕尺寸设置不同的图片，可以使用CSS中的媒体查询，代码如下：

/* 默认图片 */
.bg-img {
  background-image: url("image1.jpg");
}

/* 在较小的屏幕上使用另一张图片 */
@media (max-width: 768px) {
  .bg-img {
    background-image: url("image2.jpg");
  }
} 

在上面的代码中，我们使用了媒体查询来确定屏幕的尺寸。当屏幕宽度小于或等于768像素时，使用第二张图片作为背景。

总之，使用CSS可以让我们轻松地将一张图片铺满背景。我们可以通过CSS中的background-size属性和媒体查询来实现不同效果和适配不同设备。