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


