我想让一个半透明的div覆盖整个屏幕。我尝试了以下代码：
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
但这并没有覆盖整个屏幕，它只覆盖div内的区域。
允许一个div覆盖整个页面而不是容器内的区域。
111
- Juicy
2
9个回答
222
添加 position:fixed。这样遮罩将固定在整个屏幕上，即使你滚动页面也一样。
还可以加上margin: 0; padding:0;，这样遮罩就不会有周围的留白。
#dimScreen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
如果它不应该固定在屏幕上，请使用position:absolute;
CSS Tricks也有一篇有趣的关于全屏属性的文章。
编辑：
我刚才找到了这个答案，所以我想添加一些额外的东西。
像Daniel Allen Langdon在评论中提到的那样，添加top:0; left:0;确保覆盖物紧贴屏幕的最上方和最左边。
如果您希望某些元素位于覆盖物的顶部（以便它不会覆盖所有内容），则添加z-index。数字越高，它就覆盖越多级别。
- Michael Schmidt
2
1根据我的经验，我也需要
top: 0; left: 0;。 - Vivian River3显然有一个要注意的地方：如果一个 position:fixed 的元素有一个带有 CSS 变换属性的祖先元素，那么它将相对于该祖先元素而不是视口固定。https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values - mpoisot
28
你需要将父元素也设置为100%
html, body {
height: 100%;
}
Demo（为演示目的更改了 background）
另外，当您想要覆盖整个屏幕时，似乎要使用dim，因此在这种情况下，您需要使用position: fixed;。
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
z-index: 100; /* Just to keep it at the very top */
}
html, body {height: 100%;}
Demo 2- Mr. Alien
1
2也许父元素中有任何一个使用了
position:relative，这将无法生效。建议改用 position:fixed。 - Muhammad Talha Akbar17
这样就行了！
div {
height: 100vh;
width: 100vw;
}
- Conner Frey
7
使用position:fixed，这样您的div将持续保留在整个可视区域上方。
给您的div一个类overlay并在CSS中创建以下规则。
.overlay{
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1000;
}
- user2413035
1
这对我没有显示覆盖层div...自从2013年以来有什么变化了吗？ - erikbstack
2
试试这个
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
}
- Vladislav Stanic
2
#dimScreen{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
- tabone
1
应用CSS重置以重置所有边距和填充，如下所示
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 许可证：无（公共领域） */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
你可以根据需要使用各种CSS重置，常规并在CSS中使用。
html
{
margin: 0px;
padding: 0px;
}
body
{
margin: 0px;
padding: 0px;
}
- Vinay Pratap Singh Bhadauria
1
3这与什么相关？ - akauppi
0
将html和body标签的height设置为100％，并删除body周围的边距：
html, body {
height: 100%;
margin: 0px; /* Remove the margin around the body */
}
现在将你的 div 的 position 设置为 fixed：
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0px;
left: 0px;
z-index: 1000; /* Now the div will be on top */
}
- Vlabs
0
请尝试在body上将margin和padding设置为0。
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
- Devendra Patel
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
position: absolute; top: 0; left: 0;。 - Sergiu Paraschiv