137 views
CSS background-clip
The CSS background-clip
property is used to control how the background image or background color of an element is clipped to its box. It determines the region of the element where the background will be visible.
The background-clip
property has the following syntax:
selector {
background-clip: value;
}
selector
: Represents the HTML element or class to which thebackground-clip
property will be applied.value
: Specifies the clipping area for the background. It can take one of the following values:border-box
(default): The background is clipped to the border box of the element, including the content, padding, and border areas.padding-box
: The background is clipped to the padding box of the element, excluding the border area.content-box
: The background is clipped to the content box of the element, excluding both the padding and border areas.text
: The background is clipped to the foreground text of the element. This allows the background to be visible only where there is text content.
Example:
div {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
background-image: url('background-image.jpg');
background-color: red;
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
background-clip: text;
color: transparent;
}
In this example, we have a <div>
element with a background image and a red background color. We apply different background-clip
values to different classes:
- The class
.border-box
applies the defaultbackground-clip: border-box;
, so the background is visible inside the entire border box (content, padding, and border areas). - The class
.padding-box
setsbackground-clip: padding-box;
, so the background is visible only inside the padding area, excluding the border area. - The class
.content-box
setsbackground-clip: content-box;
, so the background is visible only inside the content area, excluding both the padding and border areas. - The class
.text
setsbackground-clip: text;
and makes the text transparent usingcolor: transparent;
, so the background image is visible only where there is text content.
The background-clip
property is a useful tool for creating interesting and unique visual effects in CSS, especially when combining it with other CSS properties like gradients, borders, and background images.