浅谈opacity和rgba

作者: 竿牍 | 来源:发表于2017-10-13 14:24 被阅读74次

背景:

我们既可以制作半透明的边框,又可以制作半透明的背景。

代码:

.rgba{
        background: rgba(255,0,0,0.5);
}
.opacity{
        background: red;
        opacity: 0.5;
 }

当用这两种样式制作半透明背景时,产生效果:

金金金金.png

产生原因:

子元素 opacity 会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。

opacity属性的值,可以被其子元素继承。例如,我们将上面图中div里面的文字用p标签括起来,尽管,我们只给div设了不透明度,但是我们的p标签中的文字也是有透明度的。

金金金金.png

总结:

所以RGBA相对于Opacity还是技高一筹的。当然,只要是涉及到颜色的都可以用RGBA来设置,比如上面用到的background-color、text-shadow、box-shadow。

相关文章

  • 浅谈opacity和rgba

    背景: 我们既可以制作半透明的边框,又可以制作半透明的背景。 代码: 当用这两种样式制作半透明背景时,产生效果: ...

  • 关于透明度属性回顾

    关于透明度属性区别 rgba()和opacity的透明效果有什么不同? rgba()和opacity都能实现透明效...

  • 30.rgba和opacity的区别? 31.CSS属性curs

    30.rgba和opacity的区别? (1)rgba和opacity都能实现透明效果,但最大的不同在于opaci...

  • css:1.颜色及背景的方法

    颜色定义: opacity 透明度的属性 rgba()和opacity都能实现透明效果但是opacity是...

  • CSS透明度之rgba和opacity的区别

    在CSS样式中,设置透明度的方式有两种。其一,opacity;其二rgba()。opacity和rgba()在一定...

  • opacity rgba

    background的属性没有继承性 字体颜色有继承性 opacity 有继承性

  • opacity和rgba的区别

    rgba opacity 他们的区别是什么呢? 有opacity属性的所有后代元素都会继承 opacity 属性,...

  • rgba()和 opacity 的区别

    opacity作用于元素,以及元素内的所有内容的透明度, 而rgba()只作用于元素的颜色或其背景色。(设置rgb...

  • rgba和opacity的区别

    说到透明度,联想到的一定是rgba和opacity啦,但是两者之间有什么区别?我们来弄清楚一下 两者之间的区别 R...

  • css背景透明

    opacity:xbackground-color: rgba(0, 0, 0, 0.4);color:trans...

网友评论

    本文标题:浅谈opacity和rgba

    本文链接:https://www.haomeiwen.com/subject/bfyzyxtx.html