背景粘附

background-attachment 屬性控制滾動元素內的背景圖片是否隨元素滾動而移動。這
個屬性的默認值是 scroll ,即背景圖片隨元素移動。若是把它的值改成 fixed ,那麼
背景圖片不會隨元素滾動而移動。
background-attachment:fixed 最經常使用於給 body 元素中心位置添加淡色水印,讓水印

不隨頁面滾動而移動。 url


實現這種效果的 CSS規則以下。
body {
background-image:url(images/watermark.png);
background-position:center;
background-color:#fff;
background-repeat:no-repeat;
background-size:contain;
background-attachment:fixed;
}
沒錯,關於背景圖片的規則寫起來有點費勁,由於屬性名太長了。別擔憂,使用簡
寫屬性 background 就能夠在一條聲明裏設置全部值。 spa


簡寫背景屬性
background 屬性能夠用來設定全部背景相關的值。好比,前面那個 background-
attachment 的例子使用簡寫的 background 屬性,能夠寫成這樣一條規則:
body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
聲明中少寫了哪一個屬性的值(好比沒寫 no-repeat ) ,就會使用相應屬性的默認值
( repeat ) 。

圖片

相關文章
相關標籤/搜索