background-size是CSS3新增的比较实用的属性，使用它可以随心所欲地控制背景图的显示大小，而在css2中背景图的大小是不可控制的。
background-size 属性
1、定义：
background-size 用来调整背景图像的尺寸大小。
2、语法：
用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto；
初始值：auto；
<length>由浮点数字和单位标识符组成的长度值，不可以为负值；
<percentage>取值0%都100%之间的值；
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
以下为引用内容：
background-size : contain | cover | 100px 100px | 50% 100%;
3、参数：
background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。
4、浏览器兼容：
IE 和遨游不支持；
Firefox 添加私有属性 -moz-background-size 支持；
Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；
Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。
5、相关属性：
background-image: url(“./img/a.jpg”); //设置元素背景图片
background-repeat： repeat/no-repeat； //设置背景图像的平铺方式 默认repeat
background-position:left top; //设置元素的背景定位起点，默认值为left top
background-size：auto; //设置背景图像的尺寸大小，默认值auto
background-attachment：scroll； //设置元素背景图片是否为固定，默认值为auto
background-clip：border-box; //控制元素的背景图像显示区域大小，默认值为border-box
background-origin：padding-box； //控制元素的背景图像position的默认起始点，默认值为padding-box
background-color：#abcdef; //设置背景颜色
6、示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#dd{
width: 300px;
height: 400px;
border: solid 1px red;
margin: 60px auto;
background: url('https://www.qiquanji.com/data/img/dmj/201905251558747432633733.jpg') no-repeat;
background-position: 0% 0%;
background-size: 300px 400px;
}
</style>
</head>
<body>
<div id="dd">
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/8674.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知