background-repeat: repeat-x | repeat-y | [repeat | no-repeat | space | round]{1, 2}
一個例子:
.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
背景圖片的起點由
background-origin確定,但是實際的繪圖區(qū)域由background-clip確定;可以看到背景圖片水平方向鋪滿了padding-boxspace與round屬性看文檔我暫時也沒想明白,由于兼容性問題,有時間再研究吧
background-attachment: scroll (default) | fixed | local
fixed屬性表示背景圖像相對于主視口固定,但只有當容器出現(xiàn)在視口中時才會顯示背景圖像
理解:
這里有兩個視口,一個主視口(瀏覽器窗口),一個自身視口;
scroll: 當主視口滾動時,背景圖片滾動;當自身視口滾動時,背景圖片不滾動;
fixed: 背景圖片均不滾動;
local: 背景圖片均滾動;
一個例子:
<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)先級比background-color高
- 可以設置多組背景圖片
- 如果定義了多組背景圖，且背景圖之間有重疊，寫在前面的將會蓋在寫在后面的圖像之上(指定的第一個圖像最接近用戶)
系列到這里就結(jié)束了,前文鏈接:
css 之 background (一): 背景與盒模型之間的關系
css 之background (二): 背景圖像的尺寸與定位
github上的完整代碼
喜歡的話點個贊吧~
