有没有办法使用css设置字体的透明度

html-css08

有没有办法使用css设置字体的透明度,第1张

1.css3新增的一个属性rgba,语法

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

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

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

A:透明度。取值0~1之间

2.设置透明度是不会被继承的,所以不用头疼继承的问题.字体透明度便设置成color:rgba(0,0,0,0.5)边框:border:5px solid rgba(0,0,0,0.5)或者背景都可以。

3.兼容性。支持ie9及以上的浏览器

4.css2中opacity制作背景色通常用到,可是要用他来制作边框色或都说前景色的话,那他就有心无力了。

5.二者区别opacity后代元素会随着一起具有透明性,所以我们Opacity中的字随着透明值下降越来越看不清楚。但是rgba不存在这种问题。

6.比如做一个背景的透明度,那么

<style>

.div{background:rgba(0,0,0,0.5)width:100pxheight:100pxcolor:red}

.div1{background:#000width:100pxheight:100pxcolor:rgba(255,255,255,0.5)}

</style>

<div class="div">

    我是文字

</div>

<div class="div1">

    我是变透明的文字

</div>

文字不会被影响的。

7.如果需要设置字体的透明度,可以对color的rgba属性进行设置。

在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不通范围的透明度。具体语法如下:

{filter: alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

具体参数:

opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。

finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标。

测试:

filter:alpha(opacity=50)

#snake{

backgournd: #666

filter:alpha(opacity=50)

-moz-opacity:0.5

opacity:0.5

}

<div id="snake" >背景透明效果</div>

css中

filter仅支持ie6以及以上版本,

其余浏览器,包括firefox,chrome,opera,Safari都不支持。

要在这些版本设置透明度,可用opacity属性,

支持的浏览器包括IE 9.0,Firefox,Safari,Chrome,opera。

opacity取值在0到1之间浮动

以下是示例代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>opacity_CSS参考手册_web前端开发参考手册</title>

<style>

h1{margin:10px 0font-size:16px}

.test{width:300pxheight:150pxpadding:10pxbackground:#050}

.test2{width:300pxheight:150pxmargin:-120px 0 0 50pxpadding:10pxbackground:#000filter:alpha(opacity=50)opacity:.5color:#fff}

</style>

</head>

<body>

<h1>下例是一个半透明的效果:</h1>

<div class="test">不透明度为100%的box</div>

<div class="test2">不透明度为50%的box</div>

</body>

</html>