css 之background (三)

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-box
spaceround屬性看文檔我暫時也沒想明白,由于兼容性問題,有時間再研究吧

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上的完整代碼
喜歡的話點個贊吧~

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 1. 定義和用法 background是一個簡寫屬性,可以在一個聲明中設置所有的背景屬性,可設置的屬性如下: 這些...
    lightNate閱讀 4,407評論 2 9
  • 1、背景顏色-background-color 在CSS中,使用background-color屬性來控制元素的背...
    故笙丶閱讀 769評論 2 3
  • background應該是CSS里使用頻率頗高的屬性,簡單實用。但參數(shù)偏多,本篇就介紹一下background的各...
    張歆琳閱讀 4,325評論 4 26
  • 添加背景圖 用 background-image 屬性,在元素的背景中添加圖形。background-image屬...
    德育處主任閱讀 5,971評論 2 7
  • ``` //項目名 SCHEMENAME=PPX_Player //Release 或 develop BRANC...
    貝勒老爺閱讀 452評論 0 4