第28天 rgba()和opacity这两个的透明效果有什么区别呢?
Activity
xiangshuo1992 commentedon May 14, 2019
1.
opacity
是属性,rgba()
是函数,计算之后是个属性值;2.
opacity
作用于元素和元素的内容,内容会继承元素的透明度,取值0-1;3.
rgba()
一般作为背景色background-color
或者颜色color
的属性值,透明度由其中的alpha
值生效,取值0-1;扩展:
1.
transparent
也是透明,是个属性值,颜色值,跟#000
是一类,不过它是关键字来描述。2.如何隐藏一个元素?
hbl045 commentedon May 14, 2019
回复@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 commentedon May 14, 2019
@hbl045
visibility:hidden
视觉上隐藏了,但是DOM布局占位还在,所以有可能会影响现有的布局,应用场景并不多隐藏元素也可以
transform: scale(0);
跟visibility:hidden
一样,占位也是一直在的。也可以设置宽高为零
还可以通过定位或者 translate 移出可视区域。
hbl045 commentedon May 14, 2019
@xiangshuo1992 如果是占位隐藏 用overflow:hidden 在通过margin、padding 设置负值,这样也能达到隐藏,不过我是觉得有点多余了。在面试问答中,也可以作为一种思考的答案,虽然不是最优解。
sansini commentedon May 16, 2019
rgba一般是针对颜色属性进行透明度的设置,而opacity相对来说比较霸道他会将整体都变为透明状态
Konata9 commentedon Aug 13, 2019
rgba
只对颜色有影响。如果放在background
上的话,只对背景颜色有影响。不会影响元素中的其他内容以及子元素内容。opacity
的透明效果是作用整个元素以及其子元素上的。zhangkuibao commentedon Sep 9, 2019
补充: rgba和opacity的透明度可以叠加(乘算)
blueRoach commentedon Jun 24, 2020
opacity是对于一个元素,并具有继承性
rgba()是对于一个元素的颜色的属性,比如背景色、字体颜色和border颜色等
smile-2008 commentedon Sep 28, 2020
1.opacity 是属性,rgba()是函数,计算之后是个属性值;
2.opacity 作用于元素和元素的内容,内容会继承元素的透明度,取值0-1;
3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值,透明度由其中的 alpha 值生效,取值0-1;
Iambecauseyouare commentedon Mar 13, 2023
rgba作用于元素的颜色及其背景色,opacity作用于元素,以及元素内的所用内容的透明度