我想让一个半透明的div覆盖整个屏幕。我尝试了以下代码:
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
但这并没有覆盖整个屏幕,它只覆盖div内的区域。
我想让一个半透明的div覆盖整个屏幕。我尝试了以下代码:
#dimScreen
{
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
}
但这并没有覆盖整个屏幕,它只覆盖div内的区域。
添加 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
。数字越高,它就覆盖越多级别。
top: 0; left: 0;
。 - Vivian River你需要将父元素也设置为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 2position:relative
,这将无法生效。建议改用 position:fixed
。 - Muhammad Talha Akbar这样就行了!
div {
height: 100vh;
width: 100vw;
}
使用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;
}
试试这个
#dimScreen {
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
position: fixed;
top: 0;
left: 0;
}
#dimScreen{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
应用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;
}
html
{
margin: 0px;
padding: 0px;
}
body
{
margin: 0px;
padding: 0px;
}
将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 */
}
<body style="margin: 0 0 0 0; padding: 0 0 0 0;">
position: absolute; top: 0; left: 0;
。 - Sergiu Paraschiv