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(,,,.);

}

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

#box{

    width:200px;

    height:200px;

    margin:100px auto;

    text-align:center;

    line-height:200px;

    color:white;

    background-color:rgb(,,);

    opacity:0.5;

}

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

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

  1. css中的border-collapse属性如何设置表格边框线？（代码示例）

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  2. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  3. css中的毛玻璃（不是透明度） 简单文档

    其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...

  4. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  5. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  6. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

  7. css中关于table的相关设置

    一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...

  8. css中单位px，em，rem的区别

    1,px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2,em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

  9. CSS中px和em属性的特点与区别

    详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对 ...

随机推荐

  1. Selenium webdriver 截图 太长截不全的问题

    Selenium webdriver 截图 太长截不全的问题 1.环境 selenium webdriver.net 2.46.0.0 + firefox 37.0.1 + win 8.1 2.问题 ...

  2. Java的一点内容（2）

    1 面向对象的三个原则 封装性 封装的基本单元是类(class),类是一个抽象的逻辑结构,而类的对象是一个真实的物理实体:类的目的是封装复杂性,在类内部存在隐藏实现复杂性机制: 封装(encapsul ...

  3. c#类似单片机的8bit或运算

    1.正确 PWMSUBM0 &= (byte)(PWMSUBM0 | 0xfc); PWMSUBM0 &= (byte)(PWMSUBM0 | (byte)0xfc); 2.不能编译的 ...

  4. (转) Resource file and Source file

    基本上是这样的,Sourcefile文件夹里面放的是CPP文件这些,Resourcefile文件夹是资源文件夹,里面可以放你程序里需要的资源,包括图标,对话框,图片等等:对应的文件如下: Source ...

  5. [Mugeda HTML5技术教程之19]制作可定制贺卡

    本文档通过一个实例介绍可定制贺卡的动画的制作过程.实例包含两部分: 1. 动画部分:介绍动画制作过程中如何给祝福词和落款的文本对象命名,如何给定制按钮定义表单动作. 2. 代码部分:介绍贺卡的脚本逻辑 ...

  6. Tempter of the Bone--hdu1010--zoj2110

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  7. CloudStack API编程指引

    原文地址:https://cwiki.apache.org/confluence/display/CLOUDSTACK/CloudStack+API+Coding+Guidelines 前言 本文阐述 ...

  8. 在Mac上使用vundle自动安装vim插件，并用vim代替sourceinsight

    一直以来在Mac上找不到好的代码阅读工具,最近根据网上的教程,自己总结一下,做了个在Mac的类sourceinsight的vim,感觉很好用.我不喜欢那种把vim搞的很复杂的配置,所以做了个仅仅能满足 ...

  9. CART剪枝

    与上篇文章中提到的ID3算法和C4.5算法类似,CART算法也是一种决策树分类算法.CART分类回归树算法的本质也是对数据进行分类的,最终数据的表现形式也是以树形的模式展现的,CART与ID3,C4. ...

  10. DLNA架构在机顶盒上播放云存储文件的实现

    DLNA 架构在机顶盒上播放云存储文件的实现   摘要: 随着越来越多的数码设备,音像设备等对 UPNP 协议的支持和普及,业界对多媒体内容提供服务的需求越越来越强烈,为了实现遵循 UPNP 协议和  ...