blocks|key|30983|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|30984|#dimScreen+{
++++width:+100%25;
++++height:+100%25;
++++background:rgba(255,255,255,0.5);
++++position:+fixed;
++++top:+0;
++++left:+0;
}|code-block|syntax|javascript|30985|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this

<pre><code>#dimScreen {
 width: 100%;
 height: 100%;
 background:rgba(255,255,255,0.5);
 position: fixed;
 top: 0;
 left: 0;
}
</code></pre>

blocks|key|247220|text|应用css-reset来重置所有页边距和填充，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247221|/*+http://meyerweb.com/eric/tools/css/reset/+|code-block|syntax|javascript|247222|v2.0+%7C+20110126许可证:无(公用域)+*/|247223|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%25;
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;
}|247224|您可以根据需要使用各种css-resets，普通的和在css中使用的|247225|+html
+{
++margin:+0px;
+padding:+0px;
+}

body
{
margin:+0px;
padding:+0px;
}|247226|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Apply a css-reset to reset all the margins and paddings
like this

<pre><code>/* http://meyerweb.com/eric/tools/css/reset/ 
</code></pre>

v2.0 | 20110126
 License: none (public domain)
 */

<pre><code>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;
}
</code></pre>

You can use various css-resets as you need, normal and use in css

<pre><code> html
 {
 margin: 0px;
 padding: 0px;
 }

body
{
margin: 0px;
padding: 0px;
}
</code></pre>

blocks|key|31017|text|#dimScreen{
+position:fixed;
+top:0px;
+left:0px;
+width:100%25;
+height:100%25;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|31018|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>#dimScreen{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
}
</code></pre>

blocks|key|31051|text|使用position:fixed这样你的div将会持续的覆盖整个可视区域..|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|31052|为div创建一个类overlay，并在CSS中创建以下规则|31053|.overlay{
++++opacity:0.8;
++++background-color:#ccc;
++++position:fixed;
++++width:100%25;
++++height:100%25;
++++top:0px;
++++left:0px;
++++z-index:1000;
}|code-block|syntax|javascript|31054|演示：http://www.jsfiddle.net/TtL7R/1/|31055|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jsfiddle.net/TtL7R/1/^0|2|E|0|9|7|0|0|3|W|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Use <code>position:fixed</code> this way your div will remain over the whole viewable area continuously ..

give your div a class <code>overlay</code> and create the following rule in your CSS

<pre><code>.overlay{
 opacity:0.8;
 background-color:#ccc;
 position:fixed;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 z-index:1000;
}
</code></pre>

Demo: <a href="http://www.jsfiddle.net/TtL7R/1/" rel="noreferrer">http://www.jsfiddle.net/TtL7R/1/</a>

blocks|key|247303|text|请尝试将正文上的边距和填充设置为0。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247304|<body+style="margin:+0+0+0+0;+padding:+0+0+0+0;">|code-block|syntax|javascript|247305|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

please try with setting margin and padding to 0 on body.

<pre><code>&lt;body style="margin: 0 0 0 0; padding: 0 0 0 0;"&gt;
</code></pre>

blocks|key|31102|text|这将会起作用！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|31103|div+{
++height:+100vh;
++width:+100vw;
}|code-block|syntax|javascript|31104|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This will do the trick!

<pre><code>div {
 height: 100vh;
 width: 100vw;
}
</code></pre>

I'm trying to make a semi-transparent div cover the whole screen. I tried this:

<pre><code>#dimScreen
{
 width: 100%;
 height: 100%;
 background:rgba(255,255,255,0.5);
}
</code></pre>

But that doesn't cover the whole screen, it only covers the area within the div.

Allow a div to cover the whole page instead of the area within the container

HTML5

我正在尝试让一个半透明的div覆盖整个屏幕。我试过这个：#dimScreen{    width: 100%;    height: 100%;    background:rgba(255,255,255,0.5);}但这并不能覆盖整个屏幕，它只覆盖了div中的区域。

问允许div覆盖整个页面，而不是容器内的区域
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问允许div覆盖整个页面，而不是容器内的区域EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问允许div覆盖整个页面，而不是容器内的区域
EN