2016-12-26 136 views
0

好了,所以我的網站具有實際內容的背景的視頻,例如可以在我的網站在這裏可以看到:圖像疊加一個網絡視頻

http://www.thespire.net/

我怎麼會去周圍放置的圖像OVER視頻仍在播放時的視頻?我已經嘗試在JavaScript中和一些標籤中加入它,但它總是弄亂了我的網頁的格式。

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <link href='https://fonts.googleapis.com/css?family=Poppins:400,600' rel='stylesheet' type='text/css'> 
    <title>The Spire Network | Home</title> 
</head> 
<body> 
<div class="header_wrapper"> 
    <div class="header">  
     <ul> 
     <li><a href="#" style="margin-right: 40px;">HOME</a></li> 
     <li><a href="http://thespire.buycraft.net" target="_blank" style="margin-right: 40px;">STORE</a></li> 
     <li><a href="http://www.thespire.net/forums/" target="_blank" style="margin-right: 40px;">FORUMS</a></li> 
     </ul> 
    </div> 
    <div class="logo"> 
     <a href="http://www.thespire.net/forums"> 
     <img src="spirelogo.png" alt="LOGO" height="120px" width="120px" style="margin-left: 50px; margin-top: -25px; text-decoration: none; color: white;"> 
     </a> 
    </div> 
</div> 

<div id="subheader" class="section bot light"> 
    <div class="info"> 
    </div> 
    <video poster="background.jpg" autoplay loop class="bgimage"> 
     <source src="opvp.webm" type='video/webm; codecs="vp8, vorbis"' /> 
    </video> 
</div> 

<div class="container"> 
     <div class="section both light"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_4_of_4"> 
        <h1>Welcome to The Spire Network!</h1> 
        <p>The Spire Network is one of the most ambitious servers in all of Minecraft. We have a wide range of plugins and features that will keep you greatly entertained! We also offer a wide-range of donation perks which are available on our donation page which you can purchase to support the server and get yourself some awesome rewards for showing your appreciation and supporting us in this great endeavor!<br>Why not check out The Spire Network by placing IP address found below into your Minecraft Client!</p> 
        <input type="text" value="mc.thespire.net" class="address_input" readonly></input> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="section both dark"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_2_of_4 left"> 
        <h1>Get the most of the server with ranks!</h1> 
        <p>Ranks in The Spire Network are the things that define you from other players, they show that you individually have stepped up and supported the server by donating! If you are interested in supporting the server, click the "Donate Now" button to get started!</p> 
        <a href="http://thespire.buycraft.net" target="_blank" class="call_to_action pink">Donate now</a> 
        </div> 
        <div class="col span_2_of_4"> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div class="section both light"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_2_of_4"> 

        </div> 
        <div class="col span_2_of_4 left"> 
        <h1>Looking for support?</h1> 
        <p>Didn't recieve your donation? Did you get banned without any reason or for something you didn't do? Did someone harass you or bully you and wasn't punished for it? Visit our TeamSpeak or click the button below to contact a member of staff about the problem you have and we will be more than happy to help.</p> 
        <a href="http://www.thespire.net/forums" class="call_to_action green">Get help</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="section both dark"> 
      <div class="content_wrapper"> 
       <div class="section group"> 
        <div class="col span_4_of_4 center"> 
        <h1>Got a great idea for our server?</h1> 
        <p>Ideas are great for the server! New ideas open up many different paths for the server and give you, the player, a new objective to aim for! Suggestions can be anything from new plugin suggestions to ways our website could be improved! Click the button below to send a recommendation for the server!</p> 
        <a href="#" class="call_to_action blue">Submit your idea</a> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 
</body> 
</html> 

回答

1

我可以看到你有一個div叫信息:

<div class="info"> </div> 

如果添加此CSS:

.info { 
    background: rgba(0, 0, 0, 0) url("http://www.thespire.net/spirelogo.png") no-repeat scroll 0 0; 
} 

如果要完全覆蓋滑塊然後你需要更多的定製。