css中如何设置透明度

html-css018

css中如何设置透明度,第1张

怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。

<div class="box"></div>

<style>

.box{width:300pxheight:200pxmargin:0 autoboxder:1px solid #cccbackground:#000filter:alpha(opacity:30)opacity:0.3 -moz-opacity:0.3-khtml-opacity: 0.3}

</style>

其中background:#000filter:alpha(opacity:30)opacity:0.3为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。

其关的属性介绍如下:

opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。

filter:alpha(opacity=30)这一个是针对IE浏览器

-moz-opacity:0.3你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。

-khtml-opacity: 0.3这是旧版本的Safari（1.×）当渲染引擎是使用仍被称为kthml，而不是目前的WebKit。

css设置透明度，首先需要知道的是在浏览器中的不同使用，一般在ie中用的是filter:alpha(opacity=0)这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity:0,对于兼容的，一般的做法就是在书写css样式的将2个都写上就行，就能实现兼容，具体看代码：

<html>

<head>

#div1{

width:200px

height:600px

margin:0 auto

opacity:0

filter:alpha(opacity=0)//0 代表的是隐藏，就是透明度最低。

}

</head>

<body>

<div id='div1'>

<p>测试文字。</p>

</div>

</body>

</html>