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*/

时间: 2024-10-10 13:10:33

rgba()和opacity的使用的相关文章

rgba 和 opacity 的对比.

rgba 中 的 a  指的是透明度: 1. rgba 的 设置的 透明度 不会被子级 元素继承;    opacity 设置的透明度会被子级元素继承 . 因此 ,有时候 使用 rgba 会比 opacity 效果更好; 2. rgba 可以设置background-color ,  color , border-color , text-shadow , box-shadow, ------------------------------ 实例:  在一个背景 上 ,设置 一个子背景 ,这个子

RGBA 与opacity

RGBA是一种表示颜色的方式,初次看到觉得很奇怪,与RGB的区别是什么?后面查了下,才发现RGBA的好处. RGBA各个字母的含义为: R:红色值,正整数 | 百分数: G:绿色值,正整数 | 百分数: B:蓝色值,正整数| 百分数 : A:透明度,取值0~1之间. 看到A的含义,立马想起了opacity--. 关于RGBA和opacity的区别,只有两点: opacity后代元素会随着一起具有透明性(会继承),RGBA不会继承: RGBA会有兼容性的问题,opacity没有.

audio标签、HOVER效果、rgba和opacity、隐藏场景

HTML5的audio定义音频流 HTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中. <audio> 和 <video> 两个标记上控制属性的含义: controls : 显示标准的 HTML5 视频/音频播放器控制条.控制按钮. autoplay : 让文件自动播放. loop : 让文件

rgba和opacity区别

首先来看rgba: R:红色值.正整数 | 百分数G:绿色值.正整数 | 百分数B:蓝色值.正整数 | 百分数A:Alpha透明度.取值0~1之间. 再看opacity: 后面的取值为从 0.0 (完全透明)到 1.0(完全不透明). 两者的区别:opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性.

css中使用rgba和opacity设置透明度的区别

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(

【技术】RGBA和opacity的区别

opacity (filter: Alpha(Opacity=50) 或opacity:0.5)会使整个元素包括子元素透明,而RGBA仅仅是元素本身透明,子元素不透明. eg:.div {background: rgba(0,0,0,0.5);} IE下RGBA写法: .div { filter:progid:dximagetransform.microsoft.gradient (startcolorstr="#66000000", endcolorstr="#660000

透明度 rgba 和 opacity 的区别

rgba: 使用方式:rgba(255, 255, 255, .5) 最后一个参数表示透明度取值范围 0 ~1    只作用于元素的颜色或其背景色. opacity :  使用方式:opacity : .5 ;  参数表示透明度取值范围 0 ~1 作用于元素及元素内的所有内容.(即可以被其子元素继承) 原文地址:https://www.cnblogs.com/serdy/p/10252125.html

CSS3 RGBA等于RGB加上opacity吗?

在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑:CSS3 RGBA等于RGB加上opacity吗? 请别先回答,我们接下来分析分析. 以前我们经常会碰到这样一个问题,设置了一个div的opacity(透明度)以后,这个div层里的内容也跟着透明了,特别是文字,一透明就离我 们想要的效果差很远了,显示这不是我们需要的.以前我遇风这种情况通常是把透

转 opacity() 和 rgba() 的区别?display 和 visibility 有什么不同?

一.背景介绍: 1.大家在写页面时,会用到各种元素,比如div, img等等.有时候一张页面会放好几张图片,图片如果显示效果都一样,看起来很单调,整个页面给人的感觉会很硬.那么,怎么能让页面的元素有一种多样化,甚至有一种朦胧美呢?于是,有了opacity和rgba()这两个属性.其中,opacity属性是css3新提的属性. 2.另外,在看一下display和visibility背景介绍,故名思意,display和visibility是与元素显示有关系的,这两个属性都可以控制元素的显示与隐藏.究