Question

我需要在所有浏览器中使用JavaScript设置HTML <img src=""/>对象的不透明度。

在Firefox中我用line：

来做

imageobject.style.MozOpacity=opacity/100;

在不同浏览器中设置元素不透明度的正确javascript代码是什么？

Answer 1

img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

您不需要嗅探用户代理，只需设置两个值，因为浏览器会忽略不相关的值。

Answer 2

在Javascript中设置元素的不透明度：

有很多方法可以做到这一点。

示例1 ，设置元素样式属性，给出不透明度50％，如下所示：

<html>
  <div style='opacity:.5'>this text has 50% opacity.
  </div>
</html>

示例2 ，如果使用document.getElementbyId获取元素，则可以为其style.opacity属性指定0到1之间的数字。文本设置为20％不透明度。

<html>
 <div id="moo">the text</div>
 <script type="text/javascript">
  document.getElementById("moo").style.opacity=0.2;  
 </script>
</html>

示例3 ，在HTML中嵌入一个CSS选择器，引用div的类。 div中的文字是黑色的，但看起来很灰，因为它的不透明度是50％。

<html>
  <style>
    .foobar{
      opacity: .5; 
    }
  </style>
  <div class="foobar">This text is black but appears grey on screen</div>
</html>

示例4 ，导入jQuery。制作一个裸div元素。使用jQuery抓取div并将其html内容设置为span元素，该元素设置自己的不透明度。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div></div>
 <script type="text/javascript">
  $("div").html("<span style='opacity:.7'>text is 70% opacity</span>");
 </script>
</html>

示例5 ，

导入jQuery。给你的div上课。按类选择元素并设置其.css属性，将第一个参数作为不透明度传递，将第二个参数作为0到1之间的数字传递。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div class="foobar">the text</div>
 <script type="text/javascript">
  $(".foobar").css( "opacity", .5);
 </script>
</html>

示例6 ，将元素的样式设置为颜色为rgba

<div style="color: rgba(0, 0, 0, .5)">
  This text color is black, but opacity of 0.5 makes it look grey.
</div>

示例7 ，使用jQuery让浏览器花费4秒时间将元素淡出为10％不透明度。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div class="foobar">the text</div>
 <script type="text/javascript">
  $(".foobar" ).fadeTo( 4000 , 0.1, function() {
    alert("fade to 10% opacity complete");
  });
 </script>
</html>

示例8 ，使用animate方法告诉jquery花5秒钟将不透明度更改为5％。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div id="flapjack">the text</div>
 <script type="text/javascript">
  $('#flapjack').animate({ opacity: 0.05 }, 5000);
 </script>
</html>

Answer 3

您不需要使用特定于供应商的前缀或浏览器检测...

只需设置opacity即可。 Firefox，Chrome和Safari已经支持简单opacity一段时间了，IE9和支持opacity。 filter适用于IE。

Answer 4

在Chrome中，您只需在IE imgobject.style.opacity=0.5;中设置imgobject.style.filter='alpha(opacity=50)'。

在不同的浏览器中设置html元素的不透明度

4 个答案:

在Javascript中设置元素的不透明度：