ホームページ  >  記事  >  ウェブフロントエンド  >  CSSのbackground-attachment属性の使用と定義

CSSのbackground-attachment属性の使用と定義

黄舟
黄舟オリジナル
2017-06-21 11:17:022306ブラウズ

background-attachment -- スクロール軸に合わせて背景画像がどのように移動するかを定義します

値: スクロール固定 | 継承

スクロール: ページのスクロールに応じて背景画像が移動します

固定: ページのスクロールに応じて軸背景画像は移動しません

継承: 継承

初期値: スクロール

継承: いいえ

適用対象: すべての要素

background: background.attachment:attachment

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

画面の背景画像はオレンジ色の線です。スクロール軸が移動しても、オレンジ色の線の視覚的な位置は変わりません。

CSS 背景添付プロパティの例

視差スクロールを編集してみてください。 (視差スクロール) は、複数の背景レイヤーを異なる速度で動かし、3 次元の動き効果を形成し、優れた視覚体験をもたらすことを指します。今年の Web デザインのホットトレンドとして、このテクノロジーを適用する Web サイトがますます増えています。

理解できない場合は、まず eBay でエフェクトを確認してください: http://www.ebay.com/new/

実際には、背景を固定し、背景を動かさないようにするためです。スクロール軸ですが、背景を含むコンテナも一緒にスクロールします。結果として生じる視覚的な違いは、シーンを切り替えたときと同じように見えます。 (この説明が混乱しすぎないようにしてください...)

CSS で背景のスクロール方法を定義する属性は、background-attachment です

background-attachment - 背景画像がスクロール軸とともに移動する方法を定義します

Value : スクロール | 継承

スクロール: デフォルト値。ページの残りの部分がスクロールすると、

背景画像

が移動します。 修正: ページの残りの部分がスクロールしても背景画像が移動しません。

inherit:background-attachment 属性の設定を親要素から継承することを指定します。

初期値:scroll

継承:いいえ

適用対象:すべての要素

ブラウザサポート:


テスト済みのchrome、opera、safari、firefox、ie7-8は全てOKなのでそれだけだそうですIE6では機能しません~

この属性をIE6で使用するには、bodyまたはhtmlにbackground-attachment:fixedを配置する必要があります。これは、他のタグでは役に立たないことを意味します。上記の w3c で見られる効果は、体内に配置されているためです。

これは私が自分で作ったデモです。クリックしてダウンロードしてください

コード:

<!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="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

以上がCSSのbackground-attachment属性の使用と定義の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。