关于css透明的兼容火狐ie等主流浏览器的问题。为什么前缀-moz-?

html-css024

关于css透明的兼容火狐ie等主流浏览器的问题。为什么前缀-moz-?,第1张

您好!很高兴为您答疑!

兼容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>