CSSの背景

8967 ワード

背景原点プロパティは、背景画像の背景位置を指定するために使用されます.これはCSS 3のプロパティの一つです.
このプロパティを使用すると、「コンテンツボックス」「境界ボックス」または「パディングボックス」に対して背景が配置されるかどうかを指定できます.

注意:背景の添付ファイルが"fixed "の場合、このプロパティは無視され、効果はありません.

background originプロパティは、次の値を受け取ります.

パディングボックス

ボーダーボックス

コンテンツボックス

初期

相続する

背景起源プロパティ特性：

△初期値
○は全ての要素に適用される.また、::first-letter and ::first-line |
(承子)
女アニマ
CKバージョンCSS 3
JavaScriptの構文object.style.backgroundOrigin = "content-box"; |

文法


background-origin: padding-box | border-box | content-box | initial | inherit;

値

値
説明
ボーダーボックス
デフォルト値です.背景位置は境界線に対して相対的であり、背景画像はパディングエッジの左上隅から開始されます.
パディングボックス
この値を使用すると、背景位置はパディングボックスに対して相対的になり、背景画像は境界の左上隅から開始されます.
コンテンツボックス
背景位置はコンテンツボックスに対して相対的で、背景画像はコンテンツの左上隅から開始されます.
初期
プロパティを既定値に設定します.
相続する
親要素からプロパティを継承します.

背景の起源プロパティーの例

次のコードでは、参照の背景原点プロパティを使用します.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {

        border: 5px dashed #1E90FF;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");

        background-repeat: no-repeat;

        background-origin: padding-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin is set to "border-box".</p>

    <div class="example1">

      <h2>Hello world.</h2>

      <p> Have a great day!!</p>

    </div>
  </body>
</html>

Try it Yourself Online

結果:

上記のコードを実行すると、次の画像に示すような結果が得られます.

背景原点プロパティの結果

「パディングボックス」と「コンテントボックス」値による背景原点のプロパティの例

次のコード例を示します.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {

        border: 5px dashed #0000CD;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-origin: padding-box;

      }
      .example2 {

        border: 5px dashed #0000CD;

        padding: 35px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");

        background-repeat: no-repeat;

        background-origin: content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>

    <div class="example1">

      <h2>Hello world</h2>

      <p> Have a great day!!</p>

    </div>

    <p>Here the background-origin is set to "content-box".</p>

    <div class="example2">

      <h2>Hello world</h2>

      <p> Have a great day!!</p>

    </div>
  </body>
</html>

Try it Yourself Online

結果:

上記のコードを実行した後、次の画像に示すように出力を取得します.

CSSの背景

異なる値を持つ背景原点プロパティの例

下の例では、2つの背景画像を設定する方法を示します.


<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, border-box;

      }
      #example2 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, padding-box;

      }
      #example3 {

        border: 5px double black;

        padding: 25px;

        background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");

        background-repeat: no-repeat;

        background-origin: content-box, content-box;

      }
    </style>
  </head>
  <body>

    <h2>Background-origin property example</h2>

    <p>Here the background-origin: content-box, border-box; is set:</p>

    <div id="example1">

      <h2>Hello World</h2>

      <p>The first background-image starts from the upper left corner of the border.</p>

      <p>The second background-image starts from the upper left corner of the content.</p>

    </div>

    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">

      <h2>Hello World</h2>

      <p>The first background image starts from the upper left corner of the padding edge.</p>

      <p>The second background-image starts from the upper left corner of the content.</p>

    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>

    <div id="example3">

      <h2>Hello World</h2>

      <p>Both background images start from the upper left corner of the content.</p>

    </div>
  </body>
</html>

Try it Yourself Online

結果:

上記のコードを実行した後、次の画像に示すような結果が得られます.

異なる値の背景原点プロパティ

ブラウザサポート:

ブラウザサポート
先読み

CSS background Property

background-clip property

CSS background-image property

HTML Base Tag

HTML Division tag

よくある質問

バックグラウンド起源プロパティの目的は何ですか?
背景原点プロパティは、背景画像の背景位置を指定するために使用されます.
「継承」値で背景原点プロパティを与えるとどうなりますか?
親要素からプロパティを継承します.
バックグラウンド起源プロパティによって受け入れられた値は何ですか?
バックグラウンド原点プロパティで使用される値は、パディングボックス、ボーダーボックス、コンテントボックス、初期、継承されます.
背景原点プロパティの既定値はどれですか?
ボーダーボックスはデフォルト値です.背景位置は境界線に対して相対的であり、背景画像はパディングエッジの左上隅から開始されます.
郵便CSS background-origin property 最初に現れたShare Point Anchor .

Reference

この問題について(CSSの背景), 我々は、より多くの情報をここで見つけました https://dev.to/anchorshare/css-background-origin-property-2omn

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

squidインストール構成

コンソールを削除します.WebpackとUglify答えReによるログ:削除コンソール.ログとUglifyとログ