css3之背景属性之background-size

一、相关属性:

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; //设置背景颜色

二、例子:

1.初始效果:

 

初始样式效果:图片按照原始大小进行展示

 

2.添加background-size:

1)cover效果

 

效果:按照背景最长边进行按比例放大或缩小

 

2)contain效果

 

效果:图片按照背景最短边进行按比例放大或缩小

 

3)宽高百分比

 

效果:宽度和高度按照百分比进行填充

 

2.添加background-position

background-positon的属性值可以为left top

 

设置背景图片中心的位置

 

添加background-origin

 

 

 

 

添加background-clip

 

 

猜你喜欢

转载自www.cnblogs.com/pandawind/p/9771579.html