CSS的background簡寫方式

在CSS2.1裏,background屬性的簡寫方式包含五種屬性值,從CSS3開始,又增加了3個新的屬性值,加起來一共8個。

CSS2.1

background-color 使用的背景顏色。
background-image 使用的背景圖像。
background-repeat 如何重複背景圖像。
background-attachment 背景圖像是否固定或者隨着頁面的其餘部分滾動。
background-position 背景圖像的位置。

CSS3

background-size 背景圖片的尺寸。
background-origin 背景圖片的定位區域。
background-clip 背景的繪製區域。

簡寫形式

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

需要注意的是裏面的/,它和font以及border-radius裏簡寫方式使用的/用法相似。/可以在支持這種寫法的瀏覽器裏在background-position後面接着寫background-size。
除此之外,你也可以增加另外兩個描述它的屬性值: background-origin和 background-clip

.example {
  background: aquamarine 
              url(img.png) 
              no-repeat 
              scroll 
              center center / 50% 
              content-box content-box;
}

轉載自:https://www.jianshu.com/p/fa07c2606380

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章