[分享]css写背景图大小

CSS是一种用于网页设计的语言，它可以控制网页的排版、字体、颜色等外观样式。其中，CSS还可以用于设置网页的背景图片和大小。下面介绍如何使用CSS设置背景图大小。/图片宽度100，高度自适应/ .ba...

CSS是一种用于网页设计的语言，它可以控制网页的排版、字体、颜色等外观样式。其中，CSS还可以用于设置网页的背景图片和大小。下面介绍如何使用CSS设置背景图大小。

/*图片宽度100%，高度自适应*/
.background {
  background-image: url("xxx.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
} 

在上面的代码中，我们将背景图作为CSS的一部分，并将其设置为不重复、居中显示。接着，我们使用了background-size属性来提高图片的适应性。background-size属性有两个参数，第一个参数为图片的宽度，可使用具体数值或百分比，该值可以用auto表示宽度自适应。第二个参数为图片的高度，同样可以使用具体数值或百分比。另外，如果需要同时设置宽度和高度，可以使用"width height"的格式。

/*图片高度100%，宽度自适应*/
.background {
  background-image: url("xxx.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
} 

如果需要将图片高度填满整个区域，只需将background-size属性的第一个参数设置为auto，第二个参数设置为100%即可。

/*图片填满整个区域*/
.background {
  background-image: url("xxx.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
} 

最后，如果希望图片填满整个区域，可以使用background-size: cover属性。该属性将自动缩放图片，并保持其长宽比，直到背景区域完全覆盖。需要注意的是，如果图片长宽比与区域不同，可能会出现剪裁现象。

总之，CSS提供了多种设置背景图大小的方式，可以根据实际需求来选择。