如何调暗网页以将注意力集中在横幅上？ （对您网页的暗淡效果）

Question

我想知道如何在某些网页中创建此效果：

在加载网页时，带有关闭按钮的横幅广告显示为最顶层，实际网页显示为下层;网页完全变暗，因此注意力的焦点自然落在横幅广告上，并带有关闭按钮。 点击广告中的关闭按钮，会立即显示实际网页，但现在又恢复原来的亮度。

嗯，这只是一个例子，我知道这种展示广告的做法令人厌烦。

我的问题是 - 你如何在你的网页上获得昏暗和明亮的效果？

PS：

1. 我知道css中的z-index，所以我只需要知道调光部分。
2. 我正在寻找一个基于CSS的解决方案（或者重新说明，解决方案，不使用像js这样的任何脚本），如果可能的话。

谢谢你们。

Answer 1

像this之类的东西？ 非常少的脚本。

<强> HTML

<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>

<强>的jQuery

$(document).ready(function() {
    $(".overlay, .overlay-message").show();

    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});

<强> CSS

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#fff;
    opacity:1;
    z-index:1002;
}

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    display:block;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#eee;
    border:1px solid #000;
    opacity:1;
    z-index:1002;
    box-sizing:border-box;
    padding:100px 50px;
}

.overlay-message:hover { 
    cursor:pointer; 
}

<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".overlay, .overlay-message").show();
    
    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});
</script>

Answer 2

您可以使用CSS中的目标选择器和不透明度来执行此操作，但两者在大多数浏览器中都不可用。

相反，您将不得不使用javascript来显示dimed框。

通常你会使用绝对定位的100％宽度和高度框，背景颜色为rgba，并带有透明的png后退。

像这样设计样式会起作用：

#dim {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background: url('semitransparent1x1.png');
    background: rgba(0, 0, 0, 0.8);

    z-index:100;
}

然后使用一些简单的jQuery来显示它并将其删除。