CSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

CSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例)

青灯夜游

リリース： 2018-09-14 17:11:27

オリジナル

2464 人が閲覧しました

この章では、css で background-attachment 属性を使用する方法を紹介します。 (コード例) .困っている友人は参考にしていただければ幸いです。

CSS で background-attachment 属性を使用するための前提条件は、まず、background-image 属性を定義してから、background-attachment を使用して、背景画像の位置がビューポートに固定されるか、ビューポートに合わせて移動するかを示すことです。含まれているブロック。これは、背景画像がスクロール軸に沿ってどのように移動するかを定義するものとして単純に理解できます。＃＃＃＃＃＃価値：＃＃＃スクロール: デフォルト値。背景画像は要素に対して固定され、ページのスクロールに応じて背景が移動します。つまり、背景とコンテンツがバインドされます。

固定: 背景画像はビューポートに対して固定されているため、ページがスクロールしても背景は移動しません。これは、本文に背景が設定されているのと同じです。

ローカル: 背景画像は要素のコンテンツに応じて固定されます。
継承: 継承します。何も言うことはありません。

この属性は任意の要素に適用できます。

1. スクロール [背景画像のスクロール]

背景画像は要素自体に対して固定されます。コンテンツが動きます背景画像も動きます。要素に付加された境界線。

スクロールの場合、通常、背景はコンテンツとともにスクロールしますが、例外が 1 つあります。

スクロール可能な要素 (overflow:scroll に設定された要素) の場合。背景添付ファイルがスクロールするように設定されている場合、要素のコンテンツがスクロールしても背景画像はスクロールしません。

2. ローカル [スクロール要素の背景画像スクロール]

スクロール可能な要素(overflow:scrollに設定されている要素)については、背景-attachment:local、コンテンツのスクロールに合わせて背景もスクロールします。

背景画像は要素自体のコンテンツに対して相対的に配置され、最初は固定されているため、要素にスクロールバーが表示された後、背景画像はコンテンツとともにスクロールします。

コード例:

<style>
div{
    width: 200px;
    height: 350px;
    border: 1px solid red;
    background-image: url(img/img_tree.png);
    background-repeat: no-repeat;
    background-attachment: local;
    overflow: scroll;
    line-height: 1.5;
}
</style>
<body>
    <div>
    1内容超出会出现滚动条
    2内容超出会出现滚动条
    3内容超出会出现滚动条
    4内容超出会出现滚动条
    5内容超出会出现滚动条
    6内容超出会出现滚动条
    7内容超出会出现滚动条
    8内容超出会出现滚动条
    9内容超出会出现滚动条
    10内容超出会出现滚动条
    11内容超出会出现滚动条
    12内容超出会出现滚动条
    13内容超出会出现滚动条
    14内容超出会出现滚动条
    15内容超出会出现滚动条
    16内容超出会出现滚动条
    17内容超出会出现滚动条
    18内容超出会出现滚动条
    19内容超出会出现滚动条
    20内容超出会出现滚动条
    </div>
</body>

ログイン後にコピー

レンダリング:

CSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例) ##3 修正: [背景画像]

背景画像はビューポートに対して固定されており、要素にスクロールバーがある場合でも、背景画像はコンテンツとともに移動しません。 修正された使用法は次のとおりです:

<style>
body{
    background-image: url(img/cartooncat.png);
    background-position: bottom left;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 1000px;
}
</style>
</head>
<body>
    <h1>下拉看效果：</h1>
</body>

ログイン後にコピー

レンダリング:

背景添付ファイルの設定: の背景画像に修正されました。任意の要素 ;効果は同じであり、すべてビューポートに関連しています。Web ページにはビューポートが 1 つしかなく、背景と要素はそれとは何の関係もないためです。唯一の問題は、要素が表示されていない場合です。背景画像は表示されません。

CSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例)

4. 複数の背景画像background-attachment

複数の背景画像のbackground-attachmentを設定することもできます

body {
  background-image: url("imgCSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例)"), url("imgCSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例)");
  background-attachment: scroll, fixed;
}

ログイン後にコピー

以上がCSSでbackground-attachment属性を使用するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。