关于opacity或RGBA设置颜色值

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

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

.demo{
    background-color:red;
    filter:alpha(opacity=30);
    opacity:0.3;
}

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

RGBA也是用来设置颜色的。

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

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

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

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

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

.demo{
    background-color:rgba(255,0,0,0.3)
}

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

关于opacity或RGBA设置颜色值

时间: 2024-10-06 00:12:45

关于opacity或RGBA设置颜色值的相关文章

有关opacity或RGBA设置颜色值及元素的透明值

opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化 opacity声明来设置元素的透明值(改透明度的值介于0-1之间的小数, 0.5表示50%透明). opacity的特点是:当opacity设置元素的透明值,内部的文字及元素也会透明 复制代码 代码如下: .demo{  filter:alpha(opacity=30); opacity:0.3; } 注:这段代码clas

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

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

opacity与RGBA透明的区别

为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度与RGBA 及HSLA 有所不同,这种方式设置的透明度会对整个元素产生影响(元素的内容都会透明).反之,使用HSLA或RGBA 则可以仅让元素的某些部分有透明效果.这样,一个元素可以带有HSLA 透明背景,但内部的文字仍然不透明.

opacity与rgba

opacity与rgba实现透明:opacity背景透明,子元素也透明,并且不能设置边框.文字透明特效:rgba所有涉及颜色的都可以设置透明 html: <ul> <li class="opacity opacity1">100%</li> <li class="opacity opacity2">80%</li> <li class="opacity opacity3">6

【Android基础】动态设置颜色值的方法

在Android里我们通常都是在Xml里设置字体或者图片等等的颜色值,但是有些时候我们要用到动态的设置颜色值(说白了就是在代码里设置颜色值),这个时候可能有些朋友不太清除这方面,所以我总结了以下两个方式(暂时): 1.通过Color这个API获取RGB颜色值,例: tvContent.setTextColor(Color.parseColor("#969696")); 2.通过getResources函数获取到Resources,接着用getColor方法获取对应的color文件下的颜

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 200px;/*浏览器默认字体大小16px*/ 10 margin:1em;/*em以父元素字体为基准*/ 1

ie6-ie8不支持opacity,rgba解决方法

半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 这里的opacity是百分比的 opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式.也就是说,0代表完全透明,100代表完全不透明. 上面解决了透明度的问题.接下来,解决r

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区别

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