opacity 元素的透明度

最新推荐文章于 2024-06-29 16:54:32 发布

amnotsuperior

最新推荐文章于 2024-06-29 16:54:32 发布

阅读量459

点赞数

分类专栏： web--css

web--css 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
  {el.style.opacity=opacity;}
else
  {alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>

<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
<select οnchange="ChangeOpacity(this);" size="5">
  <option />0
  <option />0.2
  <option />0.5
  <option />0.8
  <option selected="selected" />1
</select>

</body>
</html>

<p style="margin: 10px auto; padding: 0px; text-indent: 0px; color: rgb(73, 73, 73); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: auto; text-align: start; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari：</p><p style="margin: 10px auto; padding: 0px; text-indent: 0px; color: rgb(73, 73, 73); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: auto; text-align: start; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">IE: filter:alpha(opacity)<span>    </span>ie7  ie8 <br style="margin: 0px; padding: 0px;" />Mozilla: -moz-opacity<span> </span><br style="margin: 0px; padding: 0px;" />Safari: -khtml-opacity<span> </span><br style="margin: 0px; padding: 0px;" />很不幸的是，你没看见Opera，老版本的Opera并没有什么私有属性可以代替opacity。（新版Opera已经支持opacity）</p>
1 .opacity{
2  filter:alpha(opacity=50);       /* IE */
3  -moz-opacity:0.5;              /* 老版Mozilla */
4  -khtml-opacity:0.5;              /* 老版Safari */
5  opacity: 0.5;           /* 支持opacity的浏览器*/
6 }

.js  写法
1.object.filter = "alpha(opacity=" + opacity + ")";  /* IE */  
2.object.MozOpacity = (opacity / 100);    /* 老版Mozilla */
3object.KhtmlOpacity = (opacity / 100);    /* 老版Safari */
4object.opacity = (opacity / 100);    /* 支持opacity的浏览器*/
5

IE6  透明问题
  #pics
     {
                      background:url(../images/W3CfunsLogo.png) no-repeat;

                      /*以下为IE6设置PNG透明代码*/
                      _background:none;
                      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
      }