CSS background-clip修剪背景绘制区域
background-clip属性
clip单词有“修剪”的意思,因此,CSS中的background-clip属性似乎也可以理解为修剪背景的绘制区域,或者说是渲染区域,结合下方的实例来理解可以更具象化一些。
属性值
值 | 描述 |
---|---|
border-box | 背景被修剪到边框 |
padding-box | 背景被修剪到内边距 |
content-box | 背景被修剪到内容框 |
background-clip实例代码,及在线编辑器
<div id='e1' class='e'></div>
<div id='e2' class='e'>文本内容</div>
<style>
.e{width:50%;height:50%;background-image:url("../../static/img/test.jpg");background-repeat:no-repeat;border:1px solid green;padding:10%;}
#e1{background-clip:border-box;}
#e2{background-clip:content-box;}
</style>
提示
上例中的蓝色是图片,即当前实例中被background-clip修剪的图片,不是背景色。至于背景色会不会被修剪,可以在编辑器当中在线编辑修改,然后在线运行,看看效果如何。