网页中的半透明div

Question

嗨，我正在开发一个网站，想要显示一个带半透明背景的div，以便页面背景可见。 我希望这个能在所有浏览器上工作。 我可以使用CSS，JS或jquery... 请给我一些建议，如果可能的话，提供一些示例代码。

提前感谢， Raj

- Raj

Answer 1

最好的选择可能是使用纯CSS。这种技术适用于Safari 3.2+、IE 5.5+、Firefox 3.05+、Chrome 4+和Opera 10+。

div {
  /* black for browsers which cannot support rgba */
  background-color: #000;

  /* 70% opacity for supported browsers */
  background-color: rgba(0, 0, 0, 0.7);

  /* IE 5.5+ support #BB000000 is ~70% opacity on black */
  filter:progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#BB000000, endColorstr=#BB000000
  );

  /* IE 8 support */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#BB000000, endColorstr=#BB000000
  )";
}

- Owen

---

在IE中被黑客攻击的部分让我皱起了眉头 >_< 相比简单的CSS对应部分，太丑陋和过于复杂了。我希望IE开发人员能够...睁开他们的眼睛，意识到Web开发人员为了获得应用程序的兼容性所面临的痛苦。 - Warty

非常正确，但是有这个选项真的很好，而不是无论如何都要用PNG和pngfix来解决IE的问题... :) - Owen

或者如果你和我一样，正在为了乐趣而进行自己的个人项目，那么你可以坐下来说“去IE吧”^_^ - Warty

Answer 2

对于符合CSS标准的浏览器：Element.style.opacity = 0-1之间的十进制数
对于IE [也称为“魔鬼”]：element.style.filter = "alpha(opacity="+(0-100之间的数字)+")"

示例：http://www.w3schools.com/Css/css_image_transparency.asp

请注意，div中的文本/内容也将变得半透明。

将div的不透明度设置为50％的示例：

var myElement = document.body.getElementById("elemId");
myElement.style.opacity = 0.5;
myElement.style.filter = "alpha(opacity=50)"; //For the devil, IE

顺便提一下，1（在IE中为100）完全可见，而0则完全透明。希望对你有所帮助！;-)

- Warty

---

那么你只是用JavaScript编写CSS吗？为什么不一开始就直接写CSS呢？ - JP Silvashy

他说他很愿意使用JS。在我的情况下，我不太使用"经典"元素，比如div、span之类的。我一直专注于canvas的使用。因此，我不再使用样式表。由于我经常使用JavaScript，如果我同时有大量的CSS和大量的JavaScript代码，会让元素的样式变得混乱。当然，如果你设计的是一个静态网站，使用<style>标签也是可以的。 - Warty

Answer 3

如果您使用opacity，整个div，包括文本，都将具有相同的不透明度水平。

如果您的访客使用Webkit（Chrome，Safari）或Gecko（Firefox）浏览器（可能也是Presto（Opera），但我不确定），则可以使用： #divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); } 其中，红色、绿色和蓝色通道均设置为150，而Alpha设置为0.5（在完全透明和完全不透明之间）。

还有使用部分透明的背景图像的可能性，如其他地方所述。

- David Thomas

Answer 4

如果您可以接受使用jQuery解决方案，以下代码适用于所有jQuery支持的浏览器（Firefox 2.0+，Internet Explorer 6+，Safari 3+，Opera 9+，Chrome 1+）：

$('div').css('opacity', 0.5);

- Elmo

Answer 5

Elmo 说：

opacity= .5; 
filter:Alpha(opacity=50);  
background-color: rgba(0, 0, 0, 0.7);  

- Virgili Garcia

Answer 6

您也可以使用半透明的PNG格式图片。据我所知，IE6不支持半透明，但是我相信IE7+和其他主流浏览器都支持。

- Eric