CSS 的 background-clip 属性来实现背景覆盖或裁剪效果。
该属性有三个可选值:
border-box: 背景将绘制在边框盒子下面。padding-box: 背景将绘制在填充盒子下面。content-box(默认值):背景将绘制在内容区域下面。可以使用这些值来控制背景图像的显示区域,从而达到不同的视觉效果。
例如,如果将 background-clip 设置为 padding-box,背景图片就只会绘制在填充区域下方。示例代码如下:
div {
  background-image: url("example.jpg");
  background-size: cover;
  padding: 40px;
  background-clip: padding-box;
}
在上面的示例中,我们将 background-clip 属性设置为 padding-box,以便让背景图片仅填充 padding-box 区域。然后,我们还设置了 background-size: cover,以确保背景图片始终占据整个填充区域。
需要注意的是,在某些情况下,可能还需要将 background-origin 属性一起使用,以明确指定背景图片的起点位置。background-origin 控制背景图片的摆放位置,也有三个可选值:border-box、padding-box 和 content-box,它们的作用和 background-clip 属性类似。