兼容IE,firefox,chrome,Safari,Opera等主流浏览器的半透明代码:
.o
{filter:alpha(opacity=50)
opacity:0.5
-moz-opacity:0.5
width:100%
}
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
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>
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>