网页中的半透明div

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 [又名魔鬼]： 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 是完全透明。

希望有帮助！;-)