东莞做网站要多少钱,网站建设价格标准,赣州信息港手机版,东阿网站建设电话1.作用#xff1a;CSS3中的Background-clip属性#xff0c;其主要是用来确定背景的裁剪区域#xff0c;换句话说#xff0c;就是如何控制元素背景显示区域
2.语法#xff1a;background-clip #xff1a; border-box || padding-box || content-box
3.取值说明#xf…1.作用CSS3中的Background-clip属性其主要是用来确定背景的裁剪区域换句话说就是如何控制元素背景显示区域
2.语法background-clip border-box || padding-box || content-box
3.取值说明
1.border-box:此值为默认值背景从border区域向外裁剪也就是超出部分将被裁剪掉
2.padding-box背景从padding区域向外裁剪超过padding区域的背景将被裁剪掉
3.context-box背景从content区域向外裁剪超过context区域的背景将被裁剪掉 不知道大家没有深入的去了解Box Model中background部分background在Box Model中他是布满整个元素的Box区域的并不是从padding内部开始只不过边框部分遮住了部分background但有一点需要注意background-color是从元素的边框左上角起到右下角止而background-image却不一样他是从padding边缘的左上角起而到border的右下角边缘止如果大家对上面那句话不太好理解的话我们一起来看一个简单的Box Model加上边框和背景色背景图片的示意图 注但如何能让他们在统一的位置显示呢那就是今天所要介绍的background-clip这个属性就会让背景色和背景图片统一在相同的位置前面也简单说过background-clip会根据不同的属性值进行裁剪多了的背景部分
4.实例 DEMO1background-clip:border-box
首先在前面的demo基础上给div.demo加上一个class名“borderBox”,然后在这个Demo上加上background-box:border-box的属性 从效果图中可以看出background-clip取值为border-box时跟没有设置background-clip效果是完全一样的那是因为background-clip的默认值为border-box
DEMO2background-clip:padding-box 此时效果就与原来默认下有明显的区别了图上可以得知只要超过padding边缘的背景都被裁剪掉了此时的裁剪并不是让背景成比例裁剪而是直接将超过padding边缘的背景剪切掉
DEMO3:background-clip:content-box 明显背景只在内容区域显示超过内容边缘的背景直接被裁剪掉了
5.给文本填充图片背景、
就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent
