1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

CSS3 background-size 属性

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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: