CSS 属性

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

如果没有 background-image 或 background-color，当边框部分不透明或透明时，background-clip 属性将具有视觉效果。

由于根元素有画布背景，并且其背景绘制区域延伸覆盖整个画布，因此在根元素上指定属性background-clip不起作用。

属性值

  • border-box: 背景应用于整个元素，即边框的外边缘，包括填充和边框。

  • padding-box: 背景应用于元素的填充区域，即填充的外边缘，不包括边框。

  • content-box: 背景应用于元素的内容区域，即在内容框中，不包括填充和边框。

  • text: 背景被剪切到元素的前景文本字符。

检查背景色和前景色的对比度，同时使用background-clip属性，因为对于视力不佳的人来说应该足够清晰。另外，请添加后备 background-color，以防背景图像加载失败。

适用

所有 HTML 元素。

DOM 语法

object.style.backgroundClip = "border-box | padding-box | content-box | text";

CSS background-clip 示例

下面的示例演示了如何使用不同的段落元素的背景剪辑值（边框框、填充框、内容框、文本） -

<html>
<head>
<style>  
   p {
      border: 10px rgb(13, 7, 190);
      border-style: dashed double;
      margin: 5px;
      padding: 1cm;
      background: linear-gradient(60deg, rgb(208, 233, 143), rgb(216, 238, 243), rgb(197, 190, 241), rgb(220, 174, 119), rgb(237, 111, 189));
      font: 700 1em sans-serif;
   }
   .border-area {
      background-clip: border-box;
   }
   .padding-area {
      background-clip: padding-box;
   }
   .content-area {
      background-clip: content-box;
   }
   .text-area {
      background-clip: text;
      -webkit-background-clip: text;
      color: gray;
   }
</style>
</head>
<body>
      <p class="border-area">应用于整个元素的背景。</p>
    <p class="padding-area">应用于填充区域的背景。</p>
    <p class="content-area">背景仅应用于内容区域。</p>
    <p class="text-area">背景被剪切到前景文本。</p>
</body>
</html>

CSS background-clip: 使用背景图像

以下示例演示如何使用background-clip属性剪切背景图像 -

<html>
<head>
<style>  
   div {
      border: 10px rgb(13, 7, 190);
      border-style: dashed;
      margin: 5px;
      padding: 1cm;
      font: 700 1em sans-serif;
      display: inline-block;
      background-image: url('/css/images/white-flower.jpg');
      height: 200px;
      width: 200px;
   }
   .border-area {
      background-clip: border-box;
   }
   .padding-area {
      background-clip: padding-box;
   }
   .content-area {
      background-clip: content-box;
   }
</style>
</head>
<body>
      <div class="border-area">应用于整个元素的背景</div>
    <div class="padding-area">应用于填充框的背景</div>
    <div class="content-area">仅应用于内容的背景</div>
</body>
</html>