【CSS】background-clip属性解决background问题。
来源:互联网 发布:传奇h5修改数据库教程 编辑:程序博客网 时间:2024/05/30 05:41
引言:相信你点进来,一定对这个话题感兴趣,那今天我们就来研究一下半透明边框!!!
先来举一个例子:
div{ background-color:#fff; border:40px solid rgba(255,255,255,.5); ... //此处省略不重要的代码!!!}
背景图片是#fff
白色,边框颜色是rgba(255,255,255,.5)
白色半透明,但是为什么半透明边框没有显示那?
其实,透明边框代码起作用了!!
那么好,我们来换一个颜色,这样你就能够看出来!!!
div{ background-color:red; border:40px solid rgba(255,255,255,.5); ... //此处省略不重要的代码!!!}
我把背景颜色换成了红色
wow!!!边框颜色变成了粉红色 是不是很神奇!!!
是不是背景颜色从半透明白色边框处透上来显示 粉红色 ?
答案是肯定的。
默认情况下,给Div设置背景颜色,背景会延伸到边框的区域(在下层)。
所以上边的现象很好解释了!!
如何解决?
从 背景和边框 (第三版) 开始,我们可以通过background-clip
属性来调整这个bug给我们带来的不便!!
background-clip
的默认初始值是border-box
意味着背景会被border box(边框的外延框)裁剪掉。
如果不希望背景入侵边框的区域,将background-clip
属性值设置为padding-box
即可。
更改之后,如下图:
div{ background-color:red; border:40px solid rgba(255,255,255,.5); background-clip:padding-box; ... //此处省略不重要的代码!!!}
此时,半透明边框清晰可见!!!
阅读全文
1 0
- 【CSS】background-clip属性解决background问题。
- CSS background-clip属性
- CSS之Background-clip属性
- css中的background的几个属性(background-attachment/background-origin,background-clip等)
- background-clip 属性
- CSS3 background-clip 属性
- background-clip属性
- CSS: background-clip与background-origin
- 背景 属性background-origin与background-clip
- CSS3 之background-clip 属性
- css3新增背景属性background-clip/background-origin/background-size
- background-clip
- [CSS]CSS background属性
- CSS学习(八)-background-origin、background-clip
- HTML/CSS: background-clip 与 background-origin的区别
- Background-clip background-origin 两个属性的水还挺深
- css3:背景属性background-origin/clip详解
- background-clip:size属性的研究
- Hello CSDN
- CS50 2016-Week 0 学习笔记
- BZOJ 2212 [Poi2011]Tree Rotations 线段树合并
- Linux下定时任务crontab实践
- codeforces 851C
- 【CSS】background-clip属性解决background问题。
- 爬虫实战之四--urllib库的使用详解
- npm安装一些包失败解决方案
- 红帽系统开机启动流程
- 辗转相除法
- 非父子组件的数据传递
- css html的三列弹性布局
- 1.计算机硬件组成
- 数据结构-线段树详解(含java源代码)