Skip to content

[css] 第28天 rgba()和opacity这两个的透明效果有什么区别呢? #99

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

xiangshuo1992

xiangshuo1992 commented on May 14, 2019

@xiangshuo1992
Contributor

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

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

hbl045

hbl045 commented on May 14, 2019

@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

xiangshuo1992 commented on May 14, 2019

@xiangshuo1992
Contributor

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

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

hbl045

hbl045 commented on May 14, 2019

@hbl045

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

sansini

sansini commented on May 16, 2019

@sansini

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

Konata9

Konata9 commented on Aug 13, 2019

@Konata9

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

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

zhangkuibao

zhangkuibao commented on Sep 9, 2019

@zhangkuibao

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

blueRoach

blueRoach commented on Jun 24, 2020

@blueRoach

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

smile-2008

smile-2008 commented on Sep 28, 2020

@smile-2008

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

Iambecauseyouare

Iambecauseyouare commented on Mar 13, 2023

@Iambecauseyouare

rgba作用于元素的颜色及其背景色,opacity作用于元素,以及元素内的所用内容的透明度

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@xiangshuo1992@blueRoach

        Issue actions

          [css] 第28天 rgba()和opacity这两个的透明效果有什么区别呢? · Issue #99 · haizlin/fe-interview