opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化

 
opacity声明来设置元素的透明值(改透明度的值介于0-1之间的小数, 0.5表示50%透明)。

opacity的特点是:当opacity设置元素的透明值,内部的文字及元素也会透明

复制代码

代码如下:

.demo{ 
 
filter:alpha(opacity=30); 
opacity:0.3; 
}

注:这段代码class为demo的标签元素的透明值为30%,里面的文字及元素透明值也会变成30%

RGBA也是用来设置颜色的。

  R:红色值 正整数 | 百分数

  G:绿色值 正整数 | 百分数

  B:蓝色值 正整数 | 百分数 

  A:透明度 (取值0-1之间)

通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化

复制代码

代码如下:

.demo{

}

注:这段代码class为demo的标签元素的透明值为30%,里面的文字及元素透明值无任何变化。

RGBA设置颜色值 浏览器支持性:

有关opacity或RGBA设置颜色值及元素的透明值的更多相关文章

  1. opacity与RGBA透明的区别

    为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度 ...

  2. 深入了解opacity和rgba

    1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha( ...

  3. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  4. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  5. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  6. XamarinAndroid组件教程设置自定义子元素动画(二)

    XamarinAndroid组件教程设置自定义子元素动画(二) (9)打开MainActivity.cs文件,为RecylerView的子元素设置添加和删除时的透明动画效果.代码如下: …… usin ...

  7. XamarinAndroid组件教程设置自定义子元素动画(一)

    XamarinAndroid组件教程设置自定义子元素动画(一) 如果在RecyclerViewAnimators.Animators中没有所需要的动画效果,就可以自定义一个.此时,需要让自定义的动画继 ...

  8. jQuery 获取、设置表单元素的值

    获取表单元素值: 文本框,文本区域: $("#txt").attr("value"): 多选框 checkbox:$("#checkbox_id&qu ...

  9. 雪碧图(background-position)、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

随机推荐

  1. MYSQL瓶颈

    一般来说, 在使用的时候 性能从某个数值开始.突然大大下降,说明就到了瓶颈期. mysql 瓶颈有2种,一种是 cpu瓶颈  一种是 io瓶颈.cpu瓶颈多是由io引起. 而io可以通过  show ...

  2. PHP生成xml 无法识别或是无法读取或是浏览器不识别等问题

    PHP 数组转XML函数如下 [PHP] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  3. PL/SQL简单实现数据库的连接

    通常我们都会去选择 通过修改配置文件去实现数据库链接,方法如下:找到你orale 安装下的文件:instantclient_11_2\network\admin 修改的主要有三个地方:上面的命名随便起 ...

  4. huangwenlong and hanqihong开光的dijkstra

    #include<iostream> #include<vector> #include<queue> #include<cstring> #inclu ...

  5. 42.Linux应用调试-初步制作系统调用(用户态->内核态)

    1首先来讲讲应用程序如何实现系统调用(用户态->内核态)? 我们以应用程序的write()函数为例: 1)首先用户态的write()函数会进入glibc库,里面会将write()转换为swi(S ...

  6. 赵雅智:service与訪问者之间进行通信,数据交换

    服务类 中间人:service服务中的bind对象 创建中间人并通过onBinder方法的return暴露出去 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  7. Vue深度学习(1)

    Hello World 现在就让我们来写第一个vue.js的实例.如下代码: html代码: <div id="demo"> {{ message }} </di ...

  8. Git(一)之基本操作详解

    前言 在这段时间的工作中一直都是用Git作为版本控制,只是知道简单的几个命令,没有去了解它的内部原理.所以周末有时间来系统学习. 现在的公司基本上都是用Git作为版本控制,当然也有SVN的. Git是 ...

  9. java 单例模式学习笔记

    1.单例模式概述 单例模式就是确保类在内存中只有一个对象,该实例必须自动创建,并且对外提供. 2.优缺点 优点:在系统内存中只存在一个对象,因此可以节约系统资源,对于一些需要频繁创建和销毁的对象单例模 ...

  10. Zabbix安装之路

    这次的教程多半是搬运过来的,但都经过小轩亲自测试与修改了.文章最后将公布原资源地址.此篇算是整合,但又不全是整合. 依旧需求开篇:上头让小轩监控一下服务器的情况,在前几篇也有所提到.于是小轩就到处去找 ...