關於css的background-attachment屬性的使用

來源:互聯網
上載者:User
這篇文章主要為大家介紹了在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">        #p1        {            width:160px;            height:1200px;            border:1px solid gray;            background-image:url("cartoongirl.gif");            background-repeat:no-repeat;            background-attachment:fixed;        }    </style></head><body>    <p id="p1"></p></body></html>

在瀏覽器預覽效果如下:

分析:

大家在瀏覽器中拖動右邊的捲軸會發現,背景圖片在頁面固定不動。

在IE或者360中設定background-attachment之後不能設定background-position屬性,不然圖片沒辦法在瀏覽器顯示。大家可以測試一下google瀏覽器、Firefox瀏覽器。

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.