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. Java这个名字怎么来

      Java语言的历程丰富多彩,被现在众多程序员和企业广泛使用,不用质疑这是Java的领先技术的结果. Java是Sun公司开发的一种编程语言,Sun公司最初的方向是让Java来开发一些电器装置程序, ...

  2. Palindrome Number 回文数

    判断一个数字是否是回文数,尝试不用其他额外空间. 注意: 负数也有可能成为回文数吗? 如果你想让int转为string,注意不用其他空间这个约束. 你也可以翻转一个int,但是有可能会溢出.     ...

  3. OC基础 类的三大特性

    OC基础  类的三大特性 OC的类和JAVA一样,都有三大特性:继承,封装,多态,那么我们就来看一下OC中类的三大特性. 1.继承 继承的特点: (1)子类从父类继承了属性和方法. (2)子类独有的属 ...

  4. iOS_SN_push/pop转场动画封装和一般动画封装

    封装类中的方法: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface AnimationE ...

  5. [OC笔记] static 关键字

    在变量声明前加上static关键字,可以使局部变量保留多次方法调用所得到的值.当多个方法对一个静态变量进行操作时,多个方法共享同一个静态变量的值.

  6. C# 操作NPOI导入导出

    //把T_Seats中的输入导出到Excel private void button3_Click(object sender, EventArgs e) { //1.读取 string sql = ...

  7. Qt历史版本下载

    今天找到一个Qt官方下载任意版本的链接,在这里分享给大家~ http://download.qt.io/archive/qt/ 里面有Qt的历史版本 原文链接http://www.donnyblog. ...

  8. 【0】Laravel 5.1 简介

    1.简介 Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以 ...

  9. jquery 自动实现autocomplete+ajax

    来公司也差不多一个半月了,一直做点小东西,现在在做公司的出货系统,也只是做来锻炼锻炼的. 好了 不废话了 下面是实现 jquery插件 autocomplete+ajax 自动实现.也是刚学,勿喷. ...

  10. 奇怪的JS正则表达式问题

    同一个正则表达式,为什么在JS里,用 var reg = new RegExp("..."); 定义,验证就各种失败,用 var reg=/.../; 定义,验证就对了...