将背景设置为黑色，不透明度为 50%

Posted 2023-03-06

【中文标题】将背景设置为黑色，不透明度为 50%

【英文标题】：set background black with 50% opacity

【发布时间】：2012-02-22 03:41:01

【问题描述】：

所以，我有一个运行此代码的 div #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 ppadding: 100px;

我想知道如何在#welcome 和透明度为 50% 的页面之间设置背景层，例如厚框/颜色框...

【参考方案1】：

基本上，您只需提供一个绝对定位的 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;

【参考方案2】：

添加默认隐藏并在需要时显示的固定叠加层。您可以自己将它添加到您的 html 结构中，也可以使用 Jquery 来添加它。我个人会将其添加到 HTML 结构中。

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

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

【参考方案3】：

欢迎使用 999 的 z-index 创建另一个 div，其大小与您的身体大小相同，z-index 为 998。 对于不透明度，您只需添加 0.5 的不透明度 :)

【讨论】：

嗯...你是对的。它会起作用，但我想知道是否还有其他方法。