一、相關屬性:
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