css中如何把背景图设置大小

CSS中如何把背景图设置大小

 有时候我们需要在网页中使用背景图来美化页面，但是当我们将图片设置为背景图时，图片大小可能不合适，需要调整大小来适配页面。以下是几种常见的设置背景图大小的方法：

方法一：使用background-size属性

background-size属性可以控制背景图像的大小，常用值有cover和contain。

 1. cover：背景图像将被缩放以致完全覆盖背景区域，可能会出现裁剪。
    2. contain：缩放背景图像以致它适应背景区域完全，空白区域显示背景的默认颜色。

 例如：

 div{
    background:url("bg.jpg") no-repeat;
    background-size:cover;
    }

方法二：设置背景图像的宽高

 直接设置背景图像的宽高也是可以的，可以使用background-size缩放背景图像，不要忘记给容器设置overflow:hidden;

 例如：

 div{
    background:url("bg.jpg") no-repeat;
    background-size:100% auto;
    overflow:hidden;
    }

方法三：使用background-image属性和height、width属性

 可以设置height和width的大小，并使用background-image来设置背景图像。

 例如：

 div{
    background-image:url("bg.jpg");
    background-repeat:no-repeat;
    height:100px;
    width:100px;
    }

总结：

 以上是三种常见的设置背景图大小的方法，可以根据具体需求选择合适的方法来调整背景图大小。