嗨,我正在开发一个网站,想要显示一个带半透明背景的div,以便页面背景可见。 我希望这个能在所有浏览器上工作。 我可以使用CSS,JS或jquery... 请给我一些建议,如果可能的话,提供一些示例代码。
提前感谢, Raj
嗨,我正在开发一个网站,想要显示一个带半透明背景的div,以便页面背景可见。 我希望这个能在所有浏览器上工作。 我可以使用CSS,JS或jquery... 请给我一些建议,如果可能的话,提供一些示例代码。
提前感谢, Raj
最好的选择可能是使用纯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
)";
}
示例: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
opacity
,整个div,包括文本,都将具有相同的不透明度水平。#divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); }
其中,红色、绿色和蓝色通道均设置为150
,而Alpha设置为0.5
(在完全透明和完全不透明之间)。$('div').css('opacity', 0.5);
Elmo 说:
opacity= .5;
filter:Alpha(opacity=50);
background-color: rgba(0, 0, 0, 0.7);
您也可以使用半透明的PNG格式图片。据我所知,IE6不支持半透明,但是我相信IE7+和其他主流浏览器都支持。