关于background-clip用法

最新推荐文章于 2025-10-06 07:12:14 发布

原创最新推荐文章于 2025-10-06 07:12:14 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

在前端开发中，遇到需要只显示内容区域背景色而隐藏外盒背景色的问题，可以使用CSS的background-clip属性来解决。通过设置`.bgbox`的`background-clip: content-box;`，使得背景色仅填充内容区域，不包括内边距和边框，从而实现预期效果。

项目中在页面展示过程中，只想展示内容块内的背景色，外盒子的背景色不需要展示，使用background-clip:content-box解决此问题
在这里插入图片描述

<div class="wrapper conBox">
	<div></div>
</div>

.wrapper{
  width:120px;
  height:120px;
  margin:20px 0 0 10px;
  display:inline-block;
  background-color: #008000;
  padding:20px;
}

.wrapper>div{
  margin:0;
  padding:0;
  background:rgba(3,34,144.4);
}

.bgbox{
  background-clip:content-box;
}