1.使用rgba设置背景色的透明

效果如下:

<body>
    <div id="box">
        你好啊!
    </div>
</body>
body {
    background-color:red;
}
#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgba(182,255,0,.5);
}


2.使用opacity设置背景色的透明

#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgb(182,255,0);
    opacity:0.5;
}

总结:通过2中效果的比较我们发现opacity会同时影响字体的透明度

以上就是两者之间的差别和详细解释啦,希望对大家有所帮助~~

css中使用rgba和opacity设置透明度的区别(附图)的更多相关文章

  1. css绝对定位如何在不同分辨率下的电脑正常显示定位位置?(一定要看!)

    这篇文章主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置,本文首先解释了常见的电脑分辨率,为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,再去使用绝对定位,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

  2. 详解HTML5中CSS外观属性

    这篇文章主要介绍了HTML5中CSS外观属性的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下

  3. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果,就是CSS动画样式处理,动画声明需要使用@keyframes name,后面的name是人为定义的动画名称,下面我们来看看文章的具体实现内容吧,需要的小伙伴可以参考一下

  4. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. Html5自定义字体解决方法

    这篇文章主要介绍了Html5自定义字体解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

    这篇文章主要介绍了CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号),通过css代码定义将数字多级列表展示出来,,需要的朋友可以参考下

  8. CSS position属性和实例应用演示

    这篇文章主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下

  9. HTML5 图片悬停放大的实现代码示例

    这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  10. amazeui页面分析之登录页面的示例代码

    这篇文章主要介绍了amazeui页面分析之登录页面的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. css绝对定位如何在不同分辨率下的电脑正常显示定位位置?(一定要看!)

    这篇文章主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置,本文首先解释了常见的电脑分辨率,为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,再去使用绝对定位,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

  2. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果,就是CSS动画样式处理,动画声明需要使用@keyframes name,后面的name是人为定义的动画名称,下面我们来看看文章的具体实现内容吧,需要的小伙伴可以参考一下

  3. CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

    这篇文章主要介绍了CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号),通过css代码定义将数字多级列表展示出来,,需要的朋友可以参考下

  4. CSS position属性和实例应用演示

    这篇文章主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下

  5. css中使用rgba和opacity设置透明度的区别(附图)

    这篇文章主要介绍了css中使用rgba和opacity设置透明度的两种方法,通过实例演示解释了两者之间的差别,需要的朋友可以参考下

  6. html+css 清除浮动的相关技巧心得

    下面小编就为大家带来一篇html+css 清除浮动的相关技巧心得。小编觉得挺不错的,现在分享给大家,给大家一个参考

  7. 简单介绍CSS设置打印页面的方法及css里media的使用

    这篇文章主要介绍了基于CSS设置打印页面简单介绍及css里media的使用 的相关资料,需要的朋友可以参考下

  8. CSS三大特性继承性、层叠性和优先级详解

    本文详细讲解了CSS三大特性继承性、层叠性和优先级,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  9. CSS清除浮动方法小结

    本文主要介绍了CSS解决浮动,清除浮动的几种方法:1、设置父元素高度;2、overflow;3、增加子元素(块级),并且设置其clear属性值为both来解决(隔墙法、内墙法);4、使用after或before伪对象清除浮动。下面跟着小编一起来看下吧

  10. 我就是要用CSS实现九宫格图

    本文介绍的就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感,感兴趣的小伙伴们可以参考一下

返回
顶部