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 2000 分页

    create PROCEDURE [dbo].[Proc_GetPageList] (   @Tables varchar(1000),          --表名   @PK varchar(100 ...

  2. wcf wpf

    转 http://blog.csdn.net/thunder09/article/details/5792157 WPF就是所谓下一代Windows界面层技术,我觉得还有满有前途的.不过Vista发布 ...

  3. TelerikUI_RadGrid_Filter 自定义方法

    要设置 EnableLinqExpressions="false",搞了3,4个小时没反应,就是没有设置这个 Protected Sub btnSearch_Click(sende ...

  4. UVa 679 小球下落 简单模拟题，树

    题目大意:给你一个完全二叉树,并且给他们编号,编号规则为左子树为2*k,右子树为2*k+1,每一个节点 上都有一个开关,初始时开关都处于关闭状态,小球碰到节点就会改变该点的开关的状态.然后给你I个小球 ...

  5. java基础知识再学习--HashMap与ConcurrentHashMap的区别

    引用:http://blog.csdn.net/xuefeng0707/article/details/40834595 从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是 ...

  6. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  7. 换行word-wrap与word-break兼容IE和FIREFOX -----设计师零张

    word-wrap是控制换行的.使用break-word时,是将强制换行.中文没有任何问题,英文语句也没问题.但是对于长串的英文,就不起作用.word-break是控制是否断词的.normal是默认情 ...

  8. ffmpeg编译时freetype2 not found错误

    自己安装的libfreetype2在/usr/local/lib目录下export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:$PKG_CONFIG_PATH

  9. java形参是否会改变实参

    之前一直对java这方面感到困惑---传入的形参是否会影响实参.因为c++有指针,而java没有,所以我做一个测试验证形参是否会影响实参.* 首先第一种情况---基本类型 哈哈,其实结果大概和我想的一 ...

  10. Escape character is '^]'. Connection closed by foreign host.

    今天在用易汇金的接口回调时候,老是回调不到我的机器上面.我的ip通过公网映射,按说是可以访问到我的ip,思考是什么问题. 1.防火墙关闭,不行 2.防火墙开启,但是把自己的端口号改为可以访问(参考:h ...