css之background-clip属性

1 作用:控制背景的渲染区域

2 background-clip原理是将背景渲染的区域控制和裁剪背景大小,在裁剪范围外的区域则不会被显示。

取值说明: 1.border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉 2.padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉 3.content-box:背景从content区域向外裁剪,超过内容区域的背景将被裁剪掉。

 

 

 

 效果是

 

 接下来是background-clip和background-origin的区别,因为这两个属性之间有些相同点。

background-origin

1.设置元素背景图片的原始起始位置,即可以选择背景图片是从内容区域开始显示,还是内边距,还是边框。

2.取值: padding-box、border-box、content-box

3.需要注意的是,如果背景不是no-repeat,这个属性无效

posted on 2022-05-06 16:39  无心情泡面  阅读(344)  评论(0编辑  收藏  举报