背景

UK[?b?kgra?nd] US[?b?k?ɡra?nd]

n. (絵畫など) 背景; 背景色; 背景情報(bào); サウンドトラック

複數(shù)形: 背景

attachment

UK[??t?t?m?nt] US[??t?t?m?nt]

n. (メールで送信) 添付ファイル、添付ファイル; 添付ファイル、添付ファイル; 財(cái)産の差し押さえ<法律> 逮捕、差し押さえ (人、財(cái)産)

複數(shù)形:添付ファイル

css 背景添付プロパティ 構(gòu)文

background-attachment 屬性を使用するにはどうすればよいですか?

background-attachment 屬性は、背景畫像を固定するか、ページの殘りの部分とともにスクロールするかを設(shè)定するために、background-image 屬性と一緒に使用する必要があります。設(shè)定可能: スクロール (背景畫像は要素に対して固定されます)、固定 (背景畫像はビューポートに対して固定されます)、ローカル (背景畫像は要素のコンテンツに対して固定されます)。

関數(shù): background-attachment プロパティは、背景畫像が固定されるか、ページの殘りの部分とともにスクロールするかを設(shè)定します。

説明:

scroll デフォルト値。ページの殘りの部分がスクロールすると、背景畫像が移動(dòng)します。

修正済み ページの殘りの部分がスクロールしても背景畫像が移動(dòng)しません。

loca 背景畫像は要素のコンテンツに応じて固定されます。要素のコンテンツがスクロールすると、背景畫像も常にコンテンツとともに移動(dòng)します。

inherit は、background-attachment 屬性の設(shè)定を親要素から継承することを指定します。

注: すべてのブラウザは、background-attachment 屬性をサポートしています。

css 背景添付プロパティ 例

<html>
<head>
<style type="text/css">
body 
{
background-image:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
<p>圖像不會(huì)隨頁(yè)面的其余部分滾動(dòng)。</p>
</body>
</html>
インスタンスの実行 ?

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します