CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのbackground-originプロパティとは？使い方とサンプルコードを解説

CSSのbackground-originプロパティは、背景画像の表示位置（基準点）を指定するために使用されます。このプロパティを使うことで、背景画像をボーダーボックス、パディングボックス、コンテンツボックスのどの領域を基準に配置するかを制御できます。

background-originで指定できる値

background-originプロパティには、以下の3つの値を指定できます。

  • border-box：ボーダー（枠線）の外側の端を基準として背景画像を配置します（初期値）。
  • padding-box：パディング領域の外側の端を基準として背景画像を配置します。
  • content-box：コンテンツ領域の端を基準として背景画像を配置します。

サンプルコード

以下のコードは、background-originプロパティにcontent-boxを指定した実装例です。背景画像がコンテンツ領域を基準に表示されることを確認できます。

<html>
   <head>
      <style>
         #demo {
            border: 5px dashed red;
            padding: 10px;
            background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
            background-origin: content-box;
         }
      </style>
   </head>
   <body>
      <div id="demo">
         <h1>www.tutorialspoint.com</h1>
         <p>The website www.tutorialspoint.com is owned and maintained by Tutorials Point India
            Private Limited, henceforth termed as “we”, “our”, “us”, or the “company”.
            All the visitors, users, learners, contributors, teachers, and instructors
            are named as "users"; and the website tutorialspoint.com is termed as
            "website" everywhere in this document.
            We are committed to protecting your privacy online. This privacy policy explains
            what information we collect from you or what information you share with
            us when you visit the website. We review our policy from time to time,
            so you are advised to check the latest version.
         </p>
      </div>
   </body>
</html>

実行結果のポイント

上記の例では、要素に赤色の破線ボーダー（5px）とパディング（10px）が設定されています。background-origin: content-box;を指定することで、背景画像はパディングやボーダーの内側にあるコンテンツ領域の左上を基準に描画されます。値をborder-boxやpadding-boxに変更して保存すると、背景画像の開始位置が変化する様子を確認できます。

background-clipとの違い

似たようなプロパティにbackground-clipがありますが、こちらは「背景の描画範囲（どこまで塗るか）」を制御するのに対し、background-originは「背景画像の配置基準位置」を制御するという違いがあります。両方のプロパティは同じキーワード値（border-box / padding-box / content-box）を受け取るため、組み合わせて使うことで背景の表示を細かく調整できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります