Fe-interview: [css] 第28天 rgba()和opacity这两个的透明效果有什么区别呢？

[haizhilin2013]

第28天 rgba()和opacity这两个的透明效果有什么区别呢？

[xiangshuo1992]

1.opacity 是属性，rgba()是函数，计算之后是个属性值；
2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；

扩展：
1.transparent 也是透明，是个属性值，颜色值，跟#000是一类，不过它是关键字来描述。
2.如何隐藏一个元素？

[hbl045]

回复@xiangshuo1992
隐藏元素可以从属性上进行隐藏，
display：none 通过定义自身的隐藏，并没有在页面存在dom节点，所以重新显示的时候，会导致页面重排。
visibility：hidden, 上面的不同，虽为隐藏，但在页面上还是有dom节点，个人认为比display：none较优。
opacity:1 透明度 给元素定义 隐藏、透明 是独立的透明属性,
transparent 透明颜色 是作为透明的颜色值使用，常见用在border隐藏做三角形,
rgba(0,0,0,1) 是颜色值的一种复合写法，既能显示颜色也能配合透明效果,
z-index=-1 定义层级属性若平常的页面显示为一，想看不到显示，可以把层级降低 用平常页面成为遮罩层，达到隐藏效果，换而言之，想突出一个元素也可把层级调大，类似于绝对定位的绝对效果。
, 还有一种是通过css3新增 用transform变化属性 rotate旋转 角度，也是可以达到隐藏效果，这里就涉及三维空间的思考。
欢迎大家，提出补充和有问题的地方。大家相互交流

[xiangshuo1992]

@hbl045 visibility：hidden 视觉上隐藏了，但是DOM布局占位还在，所以有可能会影响现有的布局，应用场景并不多

隐藏元素也可以 transform: scale(0); 跟 visibility：hidden 一样，占位也是一直在的。
也可以设置宽高为零
还可以通过定位或者 translate 移出可视区域。

[hbl045]

@xiangshuo1992 如果是占位隐藏 用overflow:hidden 在通过margin、padding 设置负值，这样也能达到隐藏，不过我是觉得有点多余了。在面试问答中，也可以作为一种思考的答案，虽然不是最优解。

[sansini]

rgba一般是针对颜色属性进行透明度的设置，而opacity相对来说比较霸道他会将整体都变为透明状态

[Konata9]

rgba 只对颜色有影响。如果放在 background 上的话，只对背景颜色有影响。不会影响元素中的其他内容以及子元素内容。

opacity 的透明效果是作用整个元素以及其子元素上的。

[TheMayy]

补充: rgba和opacity的透明度可以叠加(乘算)

[blueRoach]

opacity是对于一个元素，并具有继承性
rgba()是对于一个元素的颜色的属性，比如背景色、字体颜色和border颜色等

[MrZ2019]

1.opacity 是属性，rgba()是函数，计算之后是个属性值；
2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；