使用50%不透明度将背景设置为黑色。

Question

所以，我有一个

标签，它的id是#welcome，运行以下代码。

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

我在想如何设置一个背景层，在#welcome和页面之间，透明度为50%，就像thickbox/colorbox一样...

- Alex

Answer 1

在需要时显示的默认隐藏的固定覆盖层。您可以自己将其添加到HTML结构中，也可以使用Jquery添加。个人建议将其添加到HTML结构中。

.overlay元素必须具有比#welcome更低但比它所覆盖的任何其他元素更高的z-index属性。

.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;
}

已更新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 }); 
}

- My Head Hurts

Answer 2

基本上，您只需提供一个绝对定位的带有背景颜色rgba（0,0,0,0.5）或不透明度为0.5的div。覆盖层的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;
}

- Jim Jeffers

Answer 3

将welcome的z-index设为999 创建另一个div，大小与body相同，z-index为998。 对于不透明度，只需添加0.5的不透明度:)

- Teun Pronk

---

嗯...你说得对。这个方法会起作用，但我在想是否有其他方法。 - Alex