css background-attachment屬性的使用與定義-css教學-PHP中文網

首頁

web前端

css教學

css background-attachment屬性的使用與定義

黄舟

Jun 21, 2017 am 11:17 AM

css使用定義

background-attachment -- 定義背景圖片隨滾動軸的移動方式

取值: scroll | fixed | inherit

scroll: 隨著頁面的滾動軸背景圖片將移動

fixed: 隨著頁面的滾動軸背景圖片不會移動

inherit: 繼承

初始值: scroll

繼承性: 否

適用於: 所有元素

background:背景.attachment:附著.

範例

body 
{	
background-image:url(&#39;list-orange.png&#39;);	
background-attachment:fixed;	
background-repeat:repeat-x;	
background-position:center center;
}

螢幕的背景圖片為一條橘色線.隨著滾動軸移動,橘色線的視覺位置不變.

CSS background-attachment 屬性範例-- 可以嘗試編輯

CSS background-attachment 屬性範例

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為今年網頁設計的熱門趨勢，越來越多的網站應用了這項技術。

不懂的可以先看看eBay上的效果：http://www.ebay.com/new/

其實就是固定背景不讓它隨著滾動軸移動，但包含背景的容器是跟著滾動的，所造成的視覺差異看起來就像跟轉換場景一樣。（這個解釋別嫌混亂…）

在CSS中定義背景滾動方式的屬性是backgroud-attacthment

background-attachment -- 定義背景圖片隨滾動軸的移動方式

取值: scroll | fixed | inherit

scroll: 預設值。背景圖片會隨著頁面其餘部分的捲動而移動。

fixed: 當頁面的其餘部分滾動時，背景圖像不會移動。

inherit: 規定應該從父元素繼承 background-attachment 屬性的設定。

初始值: scroll

繼承性: 否

適用於: 所有元素

#瀏覽器的支援性：

測試了chrome,opera,safari,firefox,ie7-8都是可以的，所以是說IE6下不行~

在IE6下使用這個屬性，需要把background-attachment:fixed放置於body或html當中，就是說你說在其它標籤裡面是沒用。上面的w3c裡可以看得到效果就是因為它是放在body裡的。

這是我自己做的一個demo，點擊可以下載

程式碼：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img  src="/static/imghwm/default1.png"  data-src="5.jpg"  class="lazy"   alt="css background-attachment屬性的使用與定義" >
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img  src="/static/imghwm/default1.png"  data-src="qi.jpg"  class="lazy"   alt="css background-attachment屬性的使用與定義" >
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

以上是css background-attachment屬性的使用與定義的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn