[分享]css3怎么设置背景图宽高

 CSS3是网页设计当中非常常用的技术，其中设置背景图的宽高也是一个常见的需求。下面我们来介绍如何使用CSS3设置背景图的宽高。 首先，我们需要使用backgroundsize属性来设置背景图的大小。...

 CSS3是网页设计当中非常常用的技术，其中设置背景图的宽高也是一个常见的需求。下面我们来介绍如何使用CSS3设置背景图的宽高。
首先，我们需要使用background-size属性来设置背景图的大小。该属性的语法如下:

css
background-size: width height; 

其中，width和height分别取值为长度值或百分比值，表示背景图的宽度和高度。如果只指定其中一个，另一个将会根据原图的比例自动计算。
例如，如果希望将背景图的宽度设置为500px，高度设置为300px，可以这样写代码：

css
body {
  background-image: url("bg.jpg");
  background-size: 500px 300px;
} 

除了长度值和百分比值外，background-size还支持cover和contain两个关键字。cover表示将背景图缩放到覆盖整个背景区域，可能会出现裁剪的情况；contain表示将背景图缩放到完全显示在背景区域内,可能会出现留白的情况。
代码如下：

css
body {
  background-image: url("bg.jpg");
  background-size: cover;
} 

css
p {
  background-image: url("bg.jpg");
  background-size: contain;
} 

需要注意的是，Internet Explorer 8及更早版本不支持background-size属性，因此在设计的过程中需要考虑兼容性的问题。
综上所述，使用CSS3设置背景图的宽高非常简单，只需要使用background-size属性即可轻松实现。