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. [转]Sql Server 2005中的架构(Schema)、用户(User)、登录(Login)和角色(Role)

    每一个概念的产生必然是因为碰到了无法解决的问题.换句话说,如果没有它,必然会导致某些问题难以解决.所以我想从这个角度切入,希望能把这几个复杂而暧昧的多角关系从最实用的角度来阐述清楚. 在问题的最初,我 ...

  2. OpenGL ES 2.0 剪裁测试

    剪裁测试:可以在渲染时用来限制绘制区域,通过此技术可以在屏幕(帧缓冲)上指定一个矩形区域. //启用剪裁测试 GLES20.glEnable(GL10.GL_SCISSOR_TEST); //设置区域 ...

  3. 判别linux机器字节序为大端还是小端

    代码如下: #include <iostream> #include <arpa/inet.h> #include <cstdio> using namespace ...

  4. JMS-activeMQ

    参考资料: http://yuxisanren.iteye.com/blog/1912587 .JMS简介:JMS即Java Message Service,是Java 程序创建.发送.接收和读取企业 ...

  5. 慕课linux学习笔记（二）Xshell与虚拟机的连接

    选择使用的是Xshell5 新建连接 连接成功 修改编码方式,字号,颜色 PS: 连接过程中遇到了很多问题,虚拟机的网络连接我最初选择的是桥连,虚拟机和主机相互之间都能ping通但Xshell就是连接 ...

  6. 浅析 JavaScript 组件编写

    之前因项目需要也编写过一些简单的JS组件,大多是基于JQuery库的,一直也没有过总结,导致再次写到的时候还去Google, 近日看到一个文章总结的挺好,拿过整理一下做个备忘. 此次同样是基于jque ...

  7. nyoj-366-D的小L(求全排列)

    D的小L 时间限制:4000 ms  |  内存限制:65535 KB 难度:2 描述       一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡匡玩但又怕匡匡生气,这时小L给匡匡 ...

  8. Jasper_mainReport_excel html pdf 主报表中常用属性

    jasper中,excel , html, pdf 一般可以使用相同的主报表和子报表.需要在主报表中添加不同格式对应的属性.导出不同格式的报表,编译器会将相应的属性应用到对应的报表格式中. 常用属性如 ...

  9. pcduino通过USB方式刷机

    最近买了块pcduino来玩,一开始也不知道怎么入手使用,就想先学着网上来刷机,可以用TF卡来刷机,也可以用U盘来刷机.由于手上只有优盘,所以采用了第二种方式.具体方法参考了网上. 本文非原创,原文来 ...

  10. Linux里如何设置IP(RED HAT)

    一共包括以下两步 1:通过setup命令设置IP 保存…… --如果‘Use DHCP'处事[*],则可能无法手动输入IP,子网掩码和网关. 解决办法: 修改脚本/etc/sysconfig/netw ...