我的网站上有一个视频播放器，我正试图在播放视频时让整个网站变暗。我放了一个 div 来包装所有内容，并确保视频和视频容器的 z-index 高于 div。然而，它并没有像我希望的那样工作。
它也搞砸了我的 wrapper 的对齐方式。这是我的网站:http://www3.carleton.ca/clubs/sissa/html5/video.html
当我将所有内容都包装在 Shadow div 中时。一切都向左移动:
HTML:
<body>
<div id="shadow">
<div id="wrapper">
<a href="index.html">
<header id="top_header">
<h1>MacroPlay Games</h1>
</header>
</a>
<nav id="topnav">
<ul>
<a href="index.html"><li>Home</li></a>
<a href="about.html"><li>About</li></a>
<a href="video.html"><li>Trailers</li></a>
<button type="button" data-state="0" style="float:right">Cinema Mode</button>
</ul>
</nav>
<div id="body_div">
<div id="video_container">
<video id="trailers" poster="poster.jpg">
<source src="vLast.mp4" type="video/mp4">
<source src="vLast.webm" type="video/webm">
</video>
<nav>
<div id="controls" class="cAnimated cFadeInRight">
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<button id="playButton">Play</button>
<button id="vol" onclick="showSlider()">Vol</button>
<button id="containSlider">
<input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/></button>
<div id='containTime'><span id='timeDisplay'>0:00</span><span>/</span><span id='duration'>0:00</span></div>
<button id="full">Full</button>
<button id="mute">Mute</button>
</div>
<div id="playlist" class="animated fadeInRight">
<div class="thumb" id="tb1"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div>
<div class="thumb" id="tb2"><img src="TbLast.jpg" onClick="changeTrailer('vLast')"/></div>
<div class="thumb" id="tb3"><img src="TbTwo.jpg" onClick="changeTrailer('vTwo')"/></div>
</div>
</nav>
</div>
<aside id="sidebar">
<div id="side_events">
<h1>News</h1>
<ul id="events">
<li>Half-Life 3 Release: <time>04/01/13</time></li>
<li>Borderlands 3 Release: <time>05/29/13</time></li>
<li>E3 2013 Starting: <time>08/11/13</time></li>
<li>Playstation 4 Release: <time>08/31/13</time></li>
<li>Xbox 720 Release: <time>09/01/13</time></li>
</ul>
</div>
<div id="side_trailer">
<a href="video.html"><img src="TbGow.jpg" /></a>
</div>
<div id="side_advert">
<img src="http://i.imgur.com/W65o9R2.jpg" alt="Blackberry's Z10" title="Blackberry's Z10" id="advert">
</div>
</aside>
</div>
<footer id="footer">
© Copyright by SimKessy
</footer>
</div>
</div>
</body>
</html>
与 div(阴影)有关的规则:
#shadow{
position:fixed;
width:100%;
height: 100%;
top:0;
left:0;
opacity:0.5;
background-color: red;
z-index: 81;
}
#video_container{
-webkit-box-flex: 1;
-moz-box-flex: 1;
border:5px solid black;
margin: 20px;
padding: 5px;
height: 100%;
position: relative;
background-color:black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index:0;
}
#video_container video{
width: 100%;
/*height: auto;*/
display: block;
z-index: 0;
}
最佳答案
试试这个
添加这个<div class="dim"></div>就在这之前 <div id="video_container">
然后添加这个css
.dim {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
#video_container{
z-index: 1;
}
关于html - 试图让 div 覆盖整个网站，以便在播放视频时使页面变暗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14886279/