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. Python操作 Memcache、Redis、RabbitMQ

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  2. YiShop_如何选择B2C商城开发商

    说到B2C商城开发,现在网上搜索能搜出来一大堆开发公司的信息出来.面对如果巨大的信息用户应该如果去评估和判断哪家更适合自己呢!其实开发B2C商城不仅体现在一家开发公司本身的具体实力,还体现在对每一个商 ...

  3. Python爬虫(十四)_BeautifulSoup4 解析器

    CSS选择器:BeautifulSoup4 和lxml一样,Beautiful Soup也是一个HTML/XML的解析器,主要的功能也是如何解析和提取HTML/XML数据. lxml只会局部遍历,而B ...

  4. 【Java集合源代码剖析】LinkedHashmap源代码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/37867985 前言:有网友建议分析下LinkedHashMap的源代码.于是花了一晚上时间 ...

  5. 阿里巴巴2016研发project师笔试题

    问题1: 假设下列的公式成立:78+78=123,则採用的是_______进制表示的. 本题实则考察进制转换.能够设为x进制.可是x进制有一个问题.即我们无法对x进制直接进行加减乘除.故转化为我们常见 ...

  6. Java高级开发工程师面试——多线程

    来自:Sanesee 链接:http://www.sanesee.com/article/java-engineer-interview-of-thread 1.进程和线程的区别? 进程是一个具有独立 ...

  7. Spring Boot实战之逐行释义HelloWorld

    一.前言  研究Spring boot也有一小段时间了,最近会将研究东西整理一下给大家分享,大概会有10~20篇左右的博客,整个系列会以一个简单的博客系统作为基础,因为光讲理论很多东西不是特别容易理解 ...

  8. 搭建angular1 gulp项目(上传到gitup)

    (安装好相关的前端环境) 1.新建一个文件夹,名字为angular-gulp,dos命令切换到该目录,输入npm init,继续添上你需要的信息,ok之后目录中多了package.json(管理项目所 ...

  9. web项目错误页面友好处理404,500等

    写在前面: 在web项目中,可能会出现404.500等错误页面,给用户体验不怎么好,所以我们可以对这些错误页面进行友好的处理. 步骤: 1.配置web.xml: <!-- 错误页面友好显示 -- ...

  10. 安装eclipse时跳转到网页提示JRE Missing

    可能的原因:jdk与安装的eclipse不兼容,可能64位机器安装了32位的jdk,导致64位的eclipse不能识别.