CSS3 background-size 属性

时间：6年前阅读：4508

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,我们将及时处理。

微信扫码关注

更新实时通知

CSS3 background-size 属性

网友评论