Question

好的，所以我的网站在实际内容的背景中有一个视频，例子可以在我的网站上看到：

http://www.thespire.net/

在视频播放期间，如何在视频上放置图像？我已尝试将其合并到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>

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

如果您想完全覆盖滑块，则需要进行更多自定义。

图像覆盖网络视频

1 个答案: