您好,登錄后才能下訂單哦!
小編給大家分享一下css中背景固定樣式background-attachment屬性怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
一、background-attachment屬性
在CSS中,使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動。
語法:
background-attachment:scroll/fixed;
說明:
background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動,是默認選項;fixed表示背景圖像固定在頁面不動,只有其他的內容隨滾動條滾動。
舉例:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #div1 { width:160px; height:1200px; border:1px solid gray; background-image:url("cartoongirl.gif"); background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body> <div id="div1"></div> </body> </html>
在瀏覽器預覽效果如下:
分析:
大家在瀏覽器中拖動右邊的滾動條會發現,背景圖片在頁面固定不動。
在IE或者360中設置background-attachment之后不能設置background-position屬性,不然圖片沒辦法在瀏覽器顯示。
以上是“css中背景固定樣式background-attachment屬性怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。