Question

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

提前致谢，拉吉

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
  )";
}

Answer 2

对于CSS兼容的浏览器：Element.style.opacity =从0到1的十进制数对于IE [aka，the devil]：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是完全透明的。

希望有所帮助！ ; - ）

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

埃尔莫说：或

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

网页中的半透明div

6 个答案: