网页中怎么设置图片透明度

html-css012

网页中怎么设置图片透明度,第1张

一般是用CSS里的Alpha透明度进行设置的。先请看如下代码:

filter:alpha(opacity=50)/* IE */

-moz-opacity:0.5/* Moz + FF */

opacity: 0.5/* 支持CSS3的浏览器(FF 1.5也支持)*/

简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。

但是,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。

亲,我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。

.modbr{filter:alpha(opacity=80)-moz-opacity:0.8width:auto !importantwidth:100%}

注:

代码应用的式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坐标。

以上的参数可以选用,可以只设置一个opacity

如果设置成下面代码,就表示背景式半透明的:

{filter:alpha(opacity=50)}

实现透明的css方法通常有以下3种方式(以下是不透明度都为80%的写法)

css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8

css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)

IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)