这里是修真院前端小课堂,每篇分享文从
【RGBA和OPACITY的区别&DISPLAY和VISIBILITY的区别 】
大家好,我是IT修真院北京分院第23期的学员郭婷婷,一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下,修真院官网CSS任务7中涉及的关于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY:HIDDEN的区别。
小课堂【北京第202期】
分享人:郭婷婷
1.背景介绍
1.1 RGBA && OPACITY
最开始接触rgba和opacity是任务七中要求游戏结果页面页脚的底色为半透明,但里面的按钮不会跟着半透明。开始觉得很简单, 之前在看教程时看到图片透明教程,使用的是CSS3 新属性 opacity,如下图:
原图
opacity效果
但是在使用后发现子元素也被影响,效果如下:
于是,更换了另一种方案,rgba,无论如何设置父级元素的透明度,子元素的背景色的透明度保持不变,效果如下:
二、DISPLAY:NONE && VISIBILITY:HIDDEN
同样是在任务七中,出现需要隐藏的元素,于是就开始寻找可以实现效果的代码。 “display:none”和“visibility:hidden”都可以实现,但是他们二者区别在后面阐述。
2.知识剖析
一、RGBA
RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间,也就是透明度/不透明度。
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间,取值为0,那它就是完全透明的(也就是看不见的),而数值为,1则意味着一个完全不透明的像素
利用rgba产生渐变的透明效果
二、OPACITY
语法: opacity: value|inherit;
value:规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
从父元素继承 opacity 属性的值。
三、DISPLAY:NONE
display 属性规定元素应该生成的框的类型。
值为none,表示元素不会被显示。
位置也不再被占据。
四、VISIBILITY:HIDDEN
visibility 属性规定元素是否可见。
值为hidden,表示元素不可见。
但是会占据原有位置。
3.常见问题
3.1 RGBA和OPACITY的区别
3.2 DISPLAY:NONE和VISIBILITY:HIDDEN的区别
4 解决方案
4.1 RGBA和OPACITY的区别
opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。 即可以单独为被设置的元素设置透明度,而子元素而不受该设置影响。
4.2 DISPLAY:NONE和VISIBILITY:HIDDEN的区别
visibility:hidden:隐藏元素并且占据该元素原来的空间。子级设置visible后不受父级影响。
display:none:隐藏元素但不占据该元素原来的空间。父级设置值为none后,无论子级设置任何值都无法显示。
正在上传…
取消
5.编码实战
6.扩展思考
如果给子级的opacity单独设置一个值,可否挣脱父级的束缚?
给父级元素设置opacity后,子级无论设置何值都会受到父级影响。
7.参考文献
参考1:W3school
8 更多讨论
(1)如果给子级元素设置display:inline-block,父级设置display:none,结果会如何?
答:子级元素会消失,只要父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事。
(2)设置全透明后,假设是button元素还可用吗?
答:设置透明只是肉眼看不到,但是元素还是正常使用。
(3)渐变透明如何实现?
利用linear-gradient线性渐变和rgba
background: linear-gradient(rgba(41,189,224,1), rgba(41,189,224,0.2))
鸣谢
感谢大家观看
BY : 郭婷婷
PPT链接:https://ptteng.github.io/PPT/PPT/css-07-opacity.html
视频链接:http://pan.baidu.com/s/1micFOsK
密码:ijun