jQuery 将背景设置为黑色，不透明度为 50%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9062285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set background black with 50% opacity
提问by Alex
So, I have this div #welcomethat runs this code
所以，我有这个#welcome运行这段代码的div
if ($.cookie('20120129') != '1') {
$('#welcome').slideDown('slow');
$.cookie('20120129', '1', { expires: 20 });
}
#welcome{
position: absolute; z-index:100;
background: #fff; color: #000;
border: 1px solid black;
display: none;
width: 1000px;
margin: 0 auto;
}
#welcome p{padding: 100px;}
I was wondering how to set a background layer between #welcomeand the page with an 50% opicity, like thickbox/colorbox...
我想知道如何在#welcome50% opicity 和页面之间设置背景层，比如thickbox/colorbox...
回答by My Head Hurts
Add a fixed overlay that is hidden by default and shown when you need it. You can either add this to your HTML structure yourself, or use Jquery to add it. Personally I would add it to the HTML structure.
添加默认情况下隐藏并在需要时显示的固定叠加层。您可以自己将其添加到 HTML 结构中，也可以使用 Jquery 将其添加。我个人会将它添加到 HTML 结构中。
The .overlayelement must have a z-indexlower than #welcomebut higher than any other elements it must cover:
该.overlay元素必须z-index低于#welcome但高于它必须涵盖的任何其他元素：
.overlay {
background-color: #000;
bottom: 0;
display: none;
left: 0;
opacity: 0.5;
filter: alpha(opacity = 50); /* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 99;
}
Updated Jquery to add / show overlay div:
更新了 Jquery 以添加/显示覆盖 div：
//add overlay if it does not exist
if( $('.overlay').length == 0 ){
$('body').append('<div class="overlay"></div>');
}
if ($.cookie('20120129') != '1') {
$('.overlay').show();
$('#welcome').slideDown('slow');
$.cookie('20120129', '1', { expires: 20 });
}
回答by Teun Pronk
give welcome a z-index of 999 Create another div that has the size of your body with an z-index of 998. for the opacity you can just add an opacity of 0.5 :)
欢迎 z-index 为 999 创建另一个具有您身体大小的 div，z-index 为 998。对于不透明度，您只需添加 0.5 的不透明度:)
回答by Jim Jeffers
Basically you just provide a an absolutely positioned div with a background of rgba(0,0,0,0.5) or an opacity of 0.5. The z-index of the overlay should be less than that of the welcome element:
基本上，您只需提供一个绝对定位的 div，背景为 rgba(0,0,0,0.5) 或不透明度为 0.5。叠加层的 z-index 应该小于欢迎元素的 z-index：
#welcome {
z-index: 999;
}
#overlay {
background: rgba(0,0,0,0.5);
bottom: 0;
left: 0;
position: absolute;
top: 0;
right: 0;
z-index: 998;
}
