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

html-css0385

网页中怎么设置图片透明度,第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方法通常有以下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)

利用alpha通道设定透明度的时候需要单独对每一个设定,而opacity直接就运用在了整个标签上, 其实这就是两者最大的区别,总结来说,opacity只能设定整个元素的透明值,而alpha通道可以特定对元素的某个属性设定透明值,比如上面的背景、 边框、文字等。