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

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM