CSS的background-attachment使用詳解

來源:互聯網
上載者:User
這次給大家帶來,的注意事項有哪些,下面就是實戰案例,一起來看一下。

一、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>

在瀏覽器預覽效果如下:

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

CSS有幾種實現三欄布局的方法

CSS與Sass開發規範

CSS做出滑鼠上移表徵圖旋轉

相關文章

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.