志在指尖
用双手敲打未来

css透明度(属性opacity详解)

css透明度

一、cssrgba()设置色彩通明度
语法:
rgba(R,G,B,A);
1
RGBA是代表Red(赤色)Green(绿色)Blue(蓝色)和Alpha(不通明度)三个单词的缩写。RGBA色彩值是RGB色彩值的扩展,带有一个alpha通道-它规则了对象的不通明度。
rgba()里的值的介绍:
R:赤色值。正整数(0~255)
G:绿色值。正整数(0~255)
B:蓝色值。正整数(0~255)
A:通明度。取值0~1之间
rgba()只是单纯的可以设置色彩通明度,这样在页面的布局中有很多使用。比如说:让布景呈现通明效果,但上面的文字不通明。
代码实例:
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>rgba()</title>
<style>
.demo{
width:350px;
height:300px;
margin:50pxauto;
}
.demo*{
width:120px;
height:120px;
margin:10px;
float:left;
}
.demo1{
background:rgba(255,0,0,1);
}
.demo2{
background:rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<divclass=”demo”>
<divclass=”demo1″>背景色不透明,文字不透明!</div>
<divclass=”demo2″>背景色半透明,文字不透明!</div>
</div>
</body>
</html>
效果图:
在这里插入图片描绘上例中,设置的色彩值是相同的,只是通明度不同。这样看不出来有除了色彩之外的不同,咱们在父容器demo上也设置一个布景色,这样的效果图:
在这里插入图片描绘这样就可以看出:第一个盒子(demo1)没有设置通明度,赤色彻底把下面盒子(demo)的色彩给覆盖住了;第二个盒子(demo2)设置了通明度,使得色彩半通明,没有把下面盒子(demo)的色彩给彻底覆盖,而是混合显示了。
二、cssopacity特点设置布景通明度
语法:
opacity:value;
1
value:指定不通明度,从0.0(彻底通明)到1.0(彻底不通明)。
opacity特点具有继承性,会使容器中的所有元素都具有通明度;
代码实例:
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>opacity属性</title>
<style>
.demo{
width:280px;
height:140px;
margin:50pxauto;
}
.demo1,.demo2{
width:120px;
height:120px;
margin:10px;
float:left;
background:#2DC4CB;
}
.demo1{
opacity:1;
}
.demo2{
opacity:0.5;
}
</style>
</head>
<body>
<divclass=”demo”>
<divclass=”demo1″>
<p>背景色不透明,文字不透明!</p>
</div>
<divclass=”demo2″>
<p>背景色透明,文字也透明!</p>
</div>
</div>
</body>
</html>

属性opacity详解

.transparent_class
{
filter:alpha(opacity=50);
opacity:0.5;
}
opacity:0.5;这是最重要的,因为它是CSS标准.该特点支持firefox,Safari和Opera.
filter:alpha(opacity=50);这个是为IE6设的,可取值在0-100,其它三个0到1.
CSS通明度承继问题
但CSS的通明特点涉及到一个承继问题,当为父级元素设置通明度后,子元素将主动承继其通明度,比方本站的一个效果:
csstransparentinheirtCSS通明特点详解即使你又为子元素指定通明度为1也是无效的。
对于子元素是文字的状况,我的解决办法一般是如果多少还能够看清,就不论。另一个折衷的办法是,为文本子元素指定一个相对更深的色彩。也便是说,当子元素承继通明度后,所得到的文本色彩正好便是你想要的。前提是,这个色彩还有加深的可能,和需求详细的核算色彩和通明度的值。
还有“撤销通明度承继”的说法,这个说法是不太精确的,据我个人所知,没有任何撤销通明度承继的办法。只能说,当想要完成“多个元素掩盖,只让指定的元素通明”时,能够运用的一些Hack。
搜了一下,找到一个不错的完成这种效果的办法–一个关于通明承继度的问题,有爱好的朋友能够看看。原理很简单,增加一个空元素作为通明层,和不想通明可是要完成掩盖效果的元素为同级元素。父级元素运用position:relative定位;两个子元素运用position:absolute定位,完成掩盖。

未经允许不得转载:IT技术网站 » css透明度(属性opacity详解)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载