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