CSS 如何调暗您的网页以将您的注意力集中在横幅上？（您的网页上的昏暗效果）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5995252/
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
how to dim your webpage to center your attention on a banner? (dim-bright effects on your webpage)
提问by arun nair
I was wondering on how this effect is created in certain webpages :
我想知道如何在某些网页中创建这种效果：
On loading the webpage, a banner ad with a close button is displayed as the topmost layer, and the actual webpage is displayed as the lower layer; the webpage being completely dimmed out, so that the focus of attention naturally falls on the banner ad with close button. And on clicking this close button in the ad, the actual webpage is displayed immediately, but now, back to its original brightness.
加载网页时，最上层显示带有关闭按钮的横幅广告，下层显示实际网页；网页完全变暗，让注意力自然而然地落在带有关闭按钮的横幅广告上。点击广告中的关闭按钮后，实际网页会立即显示，但现在又恢复到原来的亮度。
Well, that was just an example, I know such practices of displaying ads are irksome.
好吧，那只是一个例子，我知道这种展示广告的做法令人厌烦。
And my question here is - How do you get that dim-and-brighteffect on your webpage?
我的问题是 - 你如何在你的网页上获得那种昏暗和明亮的效果？
PS:
PS：
- I know about the z-index in css, so I just need to know the dimming part.
- I'm looking for a css based solution (or rephrasing that, solution without the use of any scripting like js), if its possible.
- 我知道css中的z-index，所以我只需要知道调光部分。
- 如果可能的话，我正在寻找基于 css 的解决方案（或重新表述，不使用任何脚本（如 js）的解决方案）。
Thanks guys.
谢谢你们。
回答by kei
Something like this? Very minimal scripting.
像这样的东西？极少的脚本编写。
HTML
HTML
<div class="overlay"></div>
<div class="overlay-message">
<p>CLICK TO CLOSE</p>
</div>
jQuery
jQuery
$(document).ready(function() {
$(".overlay, .overlay-message").show();
$(".overlay-message").click(function() {
$(".overlay, .overlay-message").hide();
});
});
CSS
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>回答by Rich Bradshaw
You can do this using the :target selector in CSS and opacity, but both are not available in most browsers.
您可以使用 CSS 中的 :target 选择器和 opacity 来做到这一点，但在大多数浏览器中都没有。
Instead, you are going to have to use javascript to make the dimed box appear.
相反，您将不得不使用 javascript 来显示灰色框。
Usually you'd use a absolutely positioned 100% width and height box with a background color that's rgba with a transparent png fallback.
通常，您会使用绝对定位的 100% 宽度和高度框，背景颜色为 rgba，带有透明的 png 回退。
Styling it like this will work:
像这样设计它会起作用：
#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;
}
Then use some simple jQuery to show it and remove it.
然后使用一些简单的 jQuery 来显示并删除它。
