我正在使用以下模板为 friend 开发一个 html 页面。我希望覆盖窗口重叠并覆盖整个窗口。 在第一张图片上是这样的，我想在第二张图片上出现黑色叠加层。
https://img.bi/#/6oqwatq!ETDme8r5qEhXIsUMlkpB0xCzdMUY0Ew2TvAekFsD
这是页面的 html 代码。
$(window).load(function() {
$('.page_spinner').fadeOut();
$('body').css({overflow:'auto', 'min-height':'800px'})
}).glob {
width:100%;
height:100%;
position:absolute;
overflow:hidden
}
body {
font-family:Arial,Helvetica,sans-serif;
color:#000;
background:url(../images/bgPart.png);
line-height:20px;
min-width:980px;
min-height:100%;
position:absolute;
width:100%;
height:100%;
overflow:hidden
}
.ic {
border:0;
float:right;
background:#fff;
color:red;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0;
overflow:hidden;
padding:0
}
/* Global Structure ========================================================= */
.main {
margin:0 auto;
width:940px;
z-index:2;
height:100%
}
.page_spinner {
position:fixed;
background:url(../images/loader.gif) 50% 50% no-repeat #fbf9f3;
z-index:99;
width:100%;
height:100%;
top:0;
left:0
}
#glob {
position:relative;
overflow:hidden;
z-index:1
}
#content {
position:relative;
height:540px;
z-index:1;
width:720px;
float:left;
display:inline-block;
overflow:hidden
}
#content > ul {
width:100%;
height:540px;
z-index:1;
position:relative
}
#content > ul > li {
width:100%;
display:block;
position:absolute;
overflow:hidden
}
.box {
height:480px;
width:660px;
background:url(../images/extra1.png);
margin:30px;
position:relative
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="glob">
<div class="page_spinner"></div>
<div class="main">
<div class="center"><!--header -->
<div class="headerHolder">
<header>
<div class="logoHolder">
<h1><a href="#!/pageGallery" id="logo">oratorio</a></h1>
</div>
</header>
<div class="followHolder"><span>Call Us: +1 (800) 12 34 567</span>
<ul>
<li><a href="#"><img alt="" src="images/followIcon1.png"></a></li>
<li><a href="#"><img alt="" src="images/followIcon2.png"></a></li>
<li><a href="#"><img alt="" src="images/followIcon3.png"></a></li>
</ul>
</div>
</div>
<!--header end-->
<div class="menuHolder">
<nav class="menu">
<ul id="menu">
<li class="with_ul"><a href="#!/pageAbout"><span class="overPlane"></span><span class="mText">about</span></a>
<ul class="submenu_1">
<li><a href="#!/pageMore">Welcome</a></li>
<li><a href="#!/pageMore">Profile</a></li>
<li><a href="#!/pageMore">History</a></li>
</ul>
</li>
<li><a href="#!/pageServices"><span class="overPlane"></span><span class="mText">services</span></a></li>
<li><a href="#!/pageGallery"><span class="overPlane"></span><span class="mText">gallery</span></a></li>
<li><a href="#!/pagePrivacy"><span class="overPlane"></span><span class="mText">privacy</span></a></li>
<li><a href="#!/pageContact"><span class="overPlane"></span><span class="mText">contacts</span></a></li>
</ul>
</nav>
</div>
<!--content -->
<article id="content">
<div class="ic">More Website Templates @ TemplateMonster.com. May 07, 2012!</div>
<div class="iconHolder">
<div id="img_slider">
<ul>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon1.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon2.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon3.jpg"></a></div>
</li>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon4.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon5.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon6.jpg"></a></div>
</li>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon7.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon8.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon9.jpg"></a></div>
</li>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon1.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon2.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon3.jpg"></a></div>
</li>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon4.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon5.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon6.jpg"></a></div>
</li>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon7.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon8.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon9.jpg"></a></div>
</li>
<li>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon4.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon6.jpg"></a></div>
<div class="picHold"><a class="pic" href="images/image-blank.png" rel="Appendix"><span class="zoomSp"></span><img alt="" src="images/galleryIcon5.jpg"></a></div>
</li>
</ul>
</div>
<a href="#" id="next"><img alt="" src="images/gallNext1.png"></a> <a href="#" id="prev"><img alt="" src="images/gallPrev1.png"></a></div>
<ul>
<li id="pageAbout">
<div class="box">
<div class="closePlane"><a class="closeButton" href="#!/pageGallery"><img alt="" src="images/closeIcon.png"></a></div>
<div class="containerContent">
<h2>Welcome to Our Studio!</h2>
<div class="col1 padBot1">
<figure class="_fig1"><img alt="" src="images/page1pic1.png"></figure>
<div class="col2">
<p>Cream is one of <a class="_link1" href="http://blog.templatemonster.com/category/free-website-templates/">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution. It is also XHTML & CSS valid. The PSD source files of this <a class="_link1" href="http://blog.templatemonster.com/2012/05/07/free-full-javascript-animated-template-web-design-studio/">Cream Template</a> are available for free for the registered members of TemplateMonster.com. Feel free to get them!</p>
</div>
</div>
<div class="col1 padBot2">
<div class="col3 bord1 magRight1">
<ul class="_list1">
<li><a href="#">At vero eos et accusam justo</a></li>
<li><a href="#">Stet clitasd gubergren nosea takimata</a></li>
<li><a href="#">Duo dolores et sed diam rebum</a></li>
</ul>
</div>
<div class="col3">
<ul class="_list1">
<li><a href="#">Ipsum dolor sit amet consetetur</a></li>
<li><a href="#">Sadipscing elitr clitasdd diam nonumy</a></li>
<li><a href="#">At vero eos et accusam et justo</a></li>
</ul>
</div>
</div>
<a class="moreButton" href="#!/pageMore">Read More</a></div>
</div>
</li>
<li id="pageServices">
<div class="box">
<div class="closePlane"><a class="closeButton" href="#!/pageGallery"><img alt="" src="images/closeIcon.png"></a></div>
<div class="containerContent">
<h2>What We Can Do</h2>
<div class="col1 padBot3">
<div class="col4 magRight2">
<h3><a class="_link3" href="#">Website Designing</a></h3>
<p>Duis autem vel eum iriure dolor in hen drerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.</p>
</div>
<div class="col4">
<h3><a class="_link3" href="#">Reputation Management</a></h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo.</p>
</div>
</div>
<div class="col1">
<div class="col4 magRight2">
<h3><a class="_link3" href="#">Flash Development</a></h3>
<p>Paesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy euismod tincidunt ut laoreet.</p>
</div>
<div class="col4">
<h3><a class="_link3" href="#">3D Modeling and Animation</a></h3>
<p>Dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
</div>
</div>
</div>
</div>
</li>
<li id="pageGallery"></li>
<li id="pagePrivacy">
<div class="box">
<div class="closePlane"><a class="closeButton" href="#!/pageGallery"><img alt="" src="images/closeIcon.png"></a></div>
<div class="containerContent">
<h2>Privacy Policy</h2>
<div class="col1">
<div class="Btns1"><a class="upBtn" href="#"></a> <a class="downBtn" href="#"></a></div>
<div class="scroll1">
<p class="padBot4">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p class="padBot4">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Duis autem vel eum iriure dolor in hendrerit.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
</div>
</li>
<li id="pageContact">
<div class="box">
<div class="closePlane"><a class="closeButton" href="#!/pageGallery"><img alt="" src="images/closeIcon.png"></a></div>
<div class="containerContent">
<div class="col5 magRight3">
<h2>feedback</h2>
<div class="wrapper">
<form action="#" id="ContactForm" name="ContactForm">
<div class="success">Contact form submitted! We will be in touch soon.</div>
<fieldset class="left">
<div class="block"><label class="name padRight3"><span class="title1">Name:</span> <span class="bg"><input class="input" type="text" value=""></span> <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span></label> <label class="email"><span class="title1">Email:</span> <span class="bg"><input class="input" type="email" value=""></span> <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span></label> <label class="name padRight3"><span class="title1">Phone:</span> <span class="bg"><input class="input" type="tel" value=""></span> <span class="error">*This is not a valid number.</span> <span class="empty">*This field is required.</span></label></div>
<div class="block"><label class="message"><span class="title1">Message:</span> <span class="bg">
<textarea cols="2" rows="1">
</textarea></span> <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span></label></div>
<div class="formButtons">
<div class="formBtn"><a class="moreButton" data-type="submit" href="#">Send</a></div>
<div class="formBtn"><a class="moreButton" data-type="reset" href="#">Clear</a></div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col5">
<h2>Contacts</h2>
<div class="padBot5">
<figure class="google_map"></figure>
</div>
<div class="col5">
<p><span>8901 Marmora Road,<br>
Glasgow, D04 89GR.</span><br>
<span class="space1">Telephone:</span>+1 800 603 6035<br>
<span>E-mail: <a class="_link1" href="mailto:">mail@demolink.org</a></span></p>
</div>
</div>
</div>
</div>
</li>
<li id="pageMore">
<div class="box">
<div class="closePlane"><a class="closeButton" href="#!/pageGallery"><img alt="" src="images/closeIcon.png"></a></div>
<div class="containerContent">
<h2>Lorem Ipsum</h2>
<div class="col1">
<div class="Btns2"><a class="upBtn" href="#"></a> <a class="downBtn" href="#"></a></div>
<div class="scroll2">
<p class="padBot4">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p class="padBot4">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Duis autem vel eum iriure dolor in hendrerit.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</article>
<!--content end-->
<!--footer -->
<footer><!-- {%FOOTER_LINK} -->
<div class="mainFooter">
<div class="privHold">
<pre class="textPrivacy">
© 2012 Cream<br><span class="color4">Website Template</span> by <a class="_link2" href="http://www.templatemonster.com/" rel="nofollow">TemplateMonster.com</a> | <a class="_link2" href="http://www.html5xcss3.com/" rel="nofollow">Html5xcss3.com</a>
</pre></div>
</div>
</footer>
<!--footer end--></div>
</div>
</div>我尝试在 css 中更改 box 的值，但没有帮助。请指导我正确的方向。谢谢...
最佳答案
您需要对您的 CSS 进行一些更改/新规则
#content {
/*This makes the content section (which includes the overlay)
to appear over everything - so that menu/logos etc do not show
over the overlay*/
z-index: 100;
}
.box {
/*this removes the current way the overlay appears*/
background: none;
}
/*
Following rule creates the overlay you want.
This will not slide though, it will appear in place
*/
.box:before {
content: "";
position: fixed;
background: url("../images/extra1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
关于html - 扩展叠加层以适应浏览器窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27801136/