rgba()和opacity的使用
rgba()表示 红 绿 蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数,“可以让制定的颜色透明化”(rgb()上扩展的,其只可以设置颜色,而不能使设置的颜色透明化)
例子:rgba(55,146,179,.5) ; //rgb值为“55,146,179”,.5使设定的rgb值为50%透明,1为完全不透明,0为完全透明
opacity属性是css3的属性,也可以实现透明效果
例子:opacity:.65; //1为完全不透明,0为完全透明
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色
两种都不被IE支持(IE9开始支持)
若要为使浏览器兼顾怎么办,下面举例可以解决这个问题:
background:rgb(55,146,179); /*for IE*/
background:rgba(55,146,179,.25); /*for browsers that support RGBA*/
rgba()和opacity的使用的更多相关文章
- RGBA 与opacity
RGBA是一种表示颜色的方式,初次看到觉得很奇怪,与RGB的区别是什么?后面查了下,才发现RGBA的好处. RGBA各个字母的含义为: R:红色值,正整数 | 百分数: G:绿色值,正整数 | 百分数 ...
- rgba()和opacity之间的区别(面试题)
rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...
- rgba 和 opacity 的对比.
rgba 中 的 a 指的是透明度: 1. rgba 的 设置的 透明度 不会被子级 元素继承; opacity 设置的透明度会被子级元素继承 . 因此 ,有时候 使用 rgba 会比 opa ...
- css中使用rgba和opacity设置透明度的区别
1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...
- RGBA 和 opacity的区别
两者都可以设置透明度 区别 RGBA 只影响当前元素 opacity 后代会继承该css 值,暂时还没有办法清除该css 在线演示
- RGBA与Opacity
rgba(r,g,b,a) 都与透明度有关,rgba不会影响文字,opacity则会.
- 透明度 rgba 和 opacity 的区别
rgba: 使用方式:rgba(255, 255, 255, .5) 最后一个参数表示透明度取值范围 0 ~1 只作用于元素的颜色或其背景色. opacity : 使用方式:opacity : ...
- rgba和opacity区别
首先来看rgba: R:红色值.正整数 | 百分数G:绿色值.正整数 | 百分数B:蓝色值.正整数 | 百分数A:Alpha透明度.取值0~1之间. 再看opacity: 后面的取值为从 0.0 (完 ...
- 【CSS3】rgba与opacity
RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一 ...
随机推荐
- Android 友盟分享详细集成过程及所遇问题解决
最近项目需要针对微信.朋友圈.QQ.QQ空间集成友盟分享的功能,说实话,我也是第一次做,期间碰到过很多问题,这篇随笔就来写一下我是怎么集成友盟分享的,还有碰到哪些问题,都是怎样解决的! 其实集成友盟并 ...
- (二) 从Angular1到Angular2需要的预备知识
1. TypeScript语法与ES6新特性 写惯了jQ的话突然从ES5跳到ES6,又是个变形的ES6(TypeScript),学习成本确实不低.不过笔者也是从ng1直接上手ng2,对与很多新特性的积 ...
- 转载 JDK + Android-SDK + Python + MonkeyRunner 的安装
转载来自: 小海豚的博客 http://blog.sina.com.cn/u/1295334083 我只是搬运工... JDK + Android-SDK + Python + MonkeyRun ...
- 设置Image渲染模式使用TintColor
通过使用控件Tint Color,例如UIImageView,UIButton等 设置UIImage的渲染模式,使你用一张图片可以渲染成不同颜色,例如设置UIImage的渲染模式:UIImage.re ...
- 简单工厂模式,工厂方法模式,抽象工厂模式,spring的狂想
菜鸟D在项目中遇见一个比较纠结的高耦合,所以就想办法来解耦.情况是这样的:系统通过用户选择treeview控件的节点判断调用不同的处理,这些处理中某些东西又是类似的.同事的建议是采用简单工厂,耦合就耦 ...
- Entity Framework+SQLite+DataBaseFirst
Entity Framework+Sqlite+DataBaseFirst 本篇主要是说明在vs中配置Sqlite,及使用Entity Framework DataBaseFirst模式. 如果没有下 ...
- 了解 : angular translate 和 google translate 和 微软 translate
https://cloud.google.com/translate/v2/pricing google translate 一百万个字是$20,如果少过就得付$10,完全没有免费哦- 每天limit ...
- 用OC和Swift一起说说二叉树
前言: 一:在计算机科学中,二叉树是每个节点最多有两个子树的树结构.通常子树被称作"左子树"(left subtree)和"右子树"(right subt ...
- nodeJS中读写文件方法的区别
导言:nodejs中所有与文件相关的操作都在fs模块中,而读写操作又是我们会经常用到的操作,nodejs的fs模块针对读操作为我们提供了readFile,read, createReadStream三 ...
- Hadoop伪分布安装配置
安装环境: 系统:Ubuntu 14.10 64bit hadoop:2.5.1 jdk:1.8.0_11 安装步骤: 一.安装JDK 安装 jdk,并且配置环境以及设置成默认 sudo gedi ...