background-repeat: repeat-x | repeat-y | [repeat | no-repeat | space | round]{1, 2}
一個(gè)例子:
.demo {
width: 100px;
height: 100px;
background-clip: padding-box;
background-origin: content-box;
padding: 20px;
border: 20px dashed antiquewhite;
background-repeat: repeat-x;
background-image: url('./dog.jpg');
background-size: 50px 40px
}
image.png
背景圖片的起點(diǎn)由
background-origin確定,但是實(shí)際的繪圖區(qū)域由background-clip確定;可以看到背景圖片水平方向鋪滿了padding-boxspace與round屬性看文檔我暫時(shí)也沒(méi)想明白,由于兼容性問(wèn)題,有時(shí)間再研究吧
background-attachment: scroll (default) | fixed | local
fixed屬性表示背景圖像相對(duì)于主視口固定,但只有當(dāng)容器出現(xiàn)在視口中時(shí)才會(huì)顯示背景圖像
理解:
這里有兩個(gè)視口,一個(gè)主視口(瀏覽器窗口),一個(gè)自身視口;
scroll: 當(dāng)主視口滾動(dòng)時(shí),背景圖片滾動(dòng);當(dāng)自身視口滾動(dòng)時(shí),背景圖片不滾動(dòng);
fixed: 背景圖片均不滾動(dòng);
local: 背景圖片均滾動(dòng);
一個(gè)例子:
<div class="local">
<div class="child"></div>
</div>
<div style="height: 1600px"></div>
.local {
width: 400px;
background-image: url(./dog.jpg);
background-repeat: no-repeat;
background-attachment: local;
height: 500px;
overflow-y: scroll
}
.child {
height: 600px;
}
background-color: transparent | <color>
background-image: none | <image>
- background-image的優(yōu)先級(jí)比background-color高
- 可以設(shè)置多組背景圖片
- 如果定義了多組背景圖赔癌，且背景圖之間有重疊，寫在前面的將會(huì)蓋在寫在后面的圖像之上(指定的第一個(gè)圖像最接近用戶)
系列到這里就結(jié)束了,前文鏈接:
css 之 background (一): 背景與盒模型之間的關(guān)系
css 之background (二): 背景圖像的尺寸與定位
github上的完整代碼
喜歡的話點(diǎn)個(gè)贊吧~
