Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
エフェクト Widely available

background-clip

デフォルトでは背景はボーダーの下まで描画されますが、background-clip を使って描画範囲を制御できます。padding-box でボーダー部分を除外、content-box でパディング部分も除外できます。半透明のボーダーを使うデザインや、背景の表示範囲を精密に制御したい場面で活躍します。

背景ボックスモデル

概要

デフォルトでは背景はボーダーの下まで描画されますが、background-clip を使って描画範囲を制御できます。padding-box でボーダー部分を除外、content-box でパディング部分も除外できます。半透明のボーダーを使うデザインや、背景の表示範囲を精密に制御したい場面で活躍します。

対応ブラウザ

デスクトップ

Chrome 21+
Edge 12+
Safari 5.1+
Firefox 22+

モバイル

Chrome Android 25+
Safari iOS 5+
Firefox Android 22+

基本構文

CSS 
.padded-bg {
  background-color: #f0f0f0;
  background-clip: content-box;
  padding: 20px;
}

実務での使いどころ

  • コンテンツ領域のみの背景表示

    background-clip: content-box とパディングを組み合わせて、コンテンツ領域だけに色を付けた視覚的な余白効果を作成できます。

注意点

  • background-clip: text はこの機能とは別に定義されています。テキストクリッピングには background-clip: text を使用してください。

アクセシビリティ

  • 背景の描画範囲を変更してもコンテンツの読みやすさに影響がないことを確認してください。特にボーダー周辺の視覚的な区切りが失われないよう注意が必要です。

参考リンク