CSS - background-clip 属性_CSS 菜鸟教程

CSS background-clip 属性用于指定背景图像或颜色在元素的填充框、边框框或内容框中的显示方式。它确定将应用背景的元素的区域。

语法


background-clip: border-box | padding-box | content-box | initial | inherit;

属性值

值	描述
border-box	背景延伸到边界后面。默认值。
padding-box	背景延伸到边框的内边缘。
content-box	背景延伸到内容框的边缘。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS Background Clip 属性的示例

下面描述的示例解释了具有不同值的 background-clip 属性。

边境后的背景扩展

为了使背景能够延伸到边框后面，我们使用 border-box 值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 p {
	 	 	 	 	 	 border: 10px dotted black;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 	 	 background: green;
	 	 	 	 }

	 	 	 	 .border-area {
	 	 	 	 	 	 background-clip: border-box;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-clip property</h2>
	 	 <p class="border-area">Background applied to the entire element.</p>

</body>

</html>

边框内的背景扩展

为了使背景能够在边框内扩展，我们使用 padding-box 值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 p {
	 	 	 	 	 	 border: 10px dotted black;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 	 	 background: green;
	 	 	 	 }

	 	 	 	 .padding-area {
	 	 	 	 	 	 background-clip: padding-box;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-clip property</h2>
	 	 <p class="padding-area">
	 	 	 	 Background applied to the content & padding area.
	 	 </p>
</body>

</html>

内容框内的背景扩展

为了使背景能够延伸到内容框的边缘，我们使用 content-box 值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 p {
	 	 	 	 	 	 border: 10px dotted black;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 	 	 background: green;
	 	 	 	 }

	 	 	 	 .content-area {
	 	 	 	 	 	 background-clip: content-box;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-clip property</h2>
	 	 <p class="content-area">
	 	 	 	 Background applied only to the content area.
	 	 </p>

</body>

</html>

支持的浏览器

属性
background-clip	4.0	9.0	4.0	3.0	10.5

<< CSS - background-blend-mode 属性 CSS - background-color 属性 >>