我想知道这种效果是如何在某些网页中产生的:
加载网页时,带有关闭按钮的横幅广告显示在最顶层,实际网页显示在下层;网页完全变暗,让注意力自然落在带有关闭按钮的横幅广告上。 点击广告中的关闭按钮后,会立即显示实际网页,但现在又恢复到原来的亮度。
好吧,这只是一个例子,我知道这种展示广告的做法令人讨厌。
我的问题是 - 如何在您的网页上获得暗淡和明亮效果?
附言:
- 我知道css中的z-index,所以我只需要知道调光部分。
- 如果可能的话,我正在寻找基于 css 的解决方案(或者换句话说,不使用任何脚本(如 js)的解决方案)。
谢谢你们。
最佳答案
类似于 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>
关于css - 如何使网页变暗以将注意力集中在横幅上? (网页上的暗淡效果),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5995252/