background-clip プロパティは、背景の表示範囲を指定するプロパティです。
デフォルトで背景が表示されるのは、罫線を含むコンテンツ及びパディングの範囲と定義されています。background-clip プロパティはこの範囲を変更することができます。
次の例は、background-clip 値に padding を指定しています。
値に padding が指定された場合、背景をパディングボックスに対して相対的に適用します。背景画像はパディングを含めた左上を基準にして表示されます。
.background-clip-padding {
padding: 20px;
background-image: url("images/grid.gif");
background-clip: padding;
-moz-background-clip: padding; /* Firefox用 */
-webkit-background-clip: padding; /* Safari,Google Chrome用 */
-o-background-clip: padding; /* Opera用 */
border: dashed 10px #666;
}
値に padding が指定された場合の表示サンプルです。
値に padding が指定された場合、背景をパディングボックスに対して相対的に適用します。背景画像はパディングを含めた左上を基準にして表示されます。
次の例は、background-clip 値に border を指定しています。
値に border が指定された場合、背景をボーダーボックスに対して相対的に適用します。背景画像はボーダーを含めた左上を基準にして表示されます。
.background-clip-border {
padding: 20px;
background-image: url("images/grid.gif");
background-clip: border;
-moz-background-clip: border; /* Firefox用 */
-webkit-background-clip: border; /* Safari,Google Chrome用 */
-o-background-clip: border; /* Opera用 */
border: dashed 10px #666;
}
値に border が指定された場合の表示サンプルです。
値に border が指定された場合、背景画像をボーダーボックスに対して相対的に適用します。背景はボーダーを含めた左上を基準にして表示されます。
Post your comment