ホームページ > 記事 > ウェブフロントエンド > CSSのbackground-attachment属性の使用と定義
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 サイトの他の関連記事を参照してください。