网页中的半透明 div答案

【问题标题】：semi transparent div in a webpage网页中的半透明 div
【发布时间】：2011-01-20 08:55:43
【问题描述】：

嘿，我正在开发一个网站，我想在其中显示一个具有半透明背景的 div，以便页面背景可见。我希望这适用于所有浏览器。可以使用 CSS 、 JS 或 jquery ... 请给我建议，如果可能的话，请给我一些示例代码..

提前致谢，拉杰

【问题讨论】：

标签： javascript jquery css html transparency

【解决方案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
  )";
}

【讨论】：

被 IE 入侵的部分让我畏缩了 >_
确实如此，但是拥有这个选项是非常好的，而不是用 PNG 的 + pngfix for IE 来搞混... :)
或者，如果您像我一样，并且正在为自己的个人项目工作以获得乐趣，您可以坐下来说“Screw IE”^_^

【解决方案2】：

对于兼容 CSS 的浏览器：Element.style.opacity = 0-1 的十进制
对于 IE [又名魔鬼]： element.style.filter = "alpha(opacity="+(Number from 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 是完全透明的。

希望对您有所帮助！ ;-)

【讨论】：

所以你只是在用 JavaScript 写 CSS？为什么不一开始就写 CSS？
他说用JS没问题。就我而言，我不太使用“经典”元素，例如 div、span 等。我一直在玩画布。因此，我不再使用样式表了。因为我经常使用 JavaScript，如果我有大量的 CSS 和大量的 JavaScript，我会发现它很混乱，弄乱了元素的样式。当然，如果你正在设计一个静态网站，使用

【解决方案3】：

如果您使用opacity，整个 div（包括文本）将处于该不透明度级别。

如果您的访问者使用的是 Webkit（Chrome、Safari）或 Gecko (Firefox) 浏览器（也可能是 Presto (Opera)，但我不确定），那么您可以使用：

#divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); }

其中红色、绿色和蓝色通道设置为150，alpha 设置为0.5（介于完全透明和完全不透明之间）。

也可以使用部分透明的背景图像，如其他地方所述。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

如果您对 jQuery 解决方案感到满意，以下内容适用于 jQuery 支持的所有浏览器（Firefox 2.0+、Internet Explorer 6+、Safari 3+、Opera 9+、Chrome 1+）：

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

【讨论】：

【解决方案6】：

埃尔莫说或：

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

【讨论】：