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

CSSのbackground-clipプロパティで背景の描画範囲を指定する方法

CSSで背景色や背景画像がどこまで描画されるか（ペイントエリア）を指定したい場合は、background-clip プロパティを使用します。このプロパティを使うことで、背景をボーダー（枠線）まで広げるのか、パディングまでに留めるのか、あるいはコンテンツ領域のみに限定するのかを細かく制御できます。

background-clipの主な値

  • border-box（初期値）：ボーダー領域を含む要素全体に背景を描画します。
  • padding-box：パディング領域まで背景を描画し、ボーダーの下には背景が表示されません。
  • content-box：コンテンツ領域のみに背景を描画します。

実装例

以下のコードは、background-clip プロパティに padding-box を指定した例です。赤い破線のボーダー部分には背景色が適用されず、パディング領域までのみオレンジ色の背景が表示されます。

<html>
   <head>

      <style>
         #demo {
            border: 5px dashed red;
            padding: 10px;
            background: orange;
            background-clip: padding-box;
         }
      </style>
   </head>

   <body>

      <div id="demo">
         <h1>www.tutorialspoint.com</h1>
         <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at
            their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated,
            we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on
            topics ranging from programming languages to web designing to academics and much more..</p>
      </div>

   </body>

</html>

動作のポイント

上記の例では、要素に border: 5px dashed red; と padding: 10px; を設定しています。background-clip に padding-box を指定することで、背景色（オレンジ）がパディング領域で止まり、破線のボーダー部分は透過してページの背景が見える状態になります。

値を border-box に変更すればボーダー領域まで背景が広がり、content-box に変更すればテキスト周辺のパディング部分にも背景が表示されなくなります。実際に値を切り替えながら確認すると、挙動の違いがよく理解できるでしょう。

対応ブラウザについて

background-clip プロパティは、主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で標準的にサポートされています。古いバージョンのWebKit系ブラウザ向けには、ベンダープレフィックス付きの -webkit-background-clip を併記しておくとより安全です。

  1. CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

    Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。 基本の考え方：padding-topを使った手法 最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。 例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1