CSSのbackground-attachment属性の使用と定義-CSSチュートリアル-php.cn

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

黄舟

リリース： 2017-06-21 11:17:02

オリジナル

2327 人が閲覧しました

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

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

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

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

継承: 継承

初期値: スクロール

継承: いいえ

適用対象: すべての要素

background: background.attachment:attachment

例

body 
{	
background-image:url(&#39;list-orange.png&#39;);	
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 サイトの他の関連記事を参照してください。