0

我的网站上有一个视频播放器，当视频播放时，我试图让整个网站变暗。我放置了一个 div 来包装所有内容，并确保视频和视频容器的 z-index 高于 div。但是它并没有像我希望的那样工作。

它还搞砸了我的包装器的对齐方式。这是我的网站：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">
        &copy; Copyright  by SimKessy
    </footer>
</div>
</div>
</body>
</html>

与 div (Shadow) 相关的规则：

#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;
}

我的代码：http: //jsfiddle.net/eXJ5q/

4

2 回答 2

2

尝试这个

<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;
}
于 2013-02-15T00:25:06.550 回答
1

您可以将阴影 div 作为兄弟而不是视频容器的父级，并且一切都应该按预期工作。您也不需要如此高值的 z-index。它可以只是 1，只要它比您要隐藏的值更大。

于 2013-02-15T00:39:49.413 回答