色・背景
「background-clip」プロパティ
「background-clip」プロパティは、背景画像や背景色の適用範囲を指定するCSSプロパティです。
「clip」は「切り取り・クリップ」という意味をもち、背景画像や背景色の表示範囲を拡張したり、境界の外側の辺まで拡張することができます。
「background-clip」プロパティの値
背景画像や背景色の適用範囲を指定する値は「border-box」「padding-box」「content-box」「text」などの値を指定することができます。
また、「background-clip」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。
【プロパティの種類】
・background-color
・background-image
・background-size
・background-repeat
・background-position
・background-attachment
・background-clip
・background-origin
「background-clip」プロパティの指定方法
背景画像や背景色の適用範囲を指定する場合は、「background-clip」プロパティを使い適応する値を指定することで実装できます。
「background-clip」プロパティ
セレクタ{
background-clip:背景画像や背景色の適用範囲;
}値例
/* 基本値 */
background-clip: border-box;/* 背景を境界の外側の辺まで拡張 */
background-clip: padding-box;/* 背景をパディングの外側の辺まで拡張 */
background-clip: content-box;/* 背景をコンテンツボックスの中に切り取って表示 */
background-clip: text;/* 背景を前景のテキストの中に切り取って表示 */表示例
背景を境界の外側の辺まで拡張（border-box）
背景をパディングの外側の辺まで拡張（padding-box）
背景をコンテンツボックスの中に切り取って表示（content-box）
背景を前景のテキストの中に切り取って表示（text）
