个人中心
gpt4 book ai didi

javascript - 图像覆盖网络视频

转载 作者：太空宇宙 更新时间：2023-11-04 09:23:27 25 4
gpt4 key购买 nike

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

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>

最佳答案

我可以看到您有一个名为 info 的 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;
}

如果你想完全覆盖 slider ，那么你需要更多的定制。

关于javascript - 图像覆盖网络视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41336627/

25 4 0
文章推荐： html - 定位文本和图像
文章推荐： python - 我在解析这个 json 文件时遇到困难
文章推荐： python - 放大鼠标位置 QGraphicsView
文章推荐： linux - 是否可以向 TSTP 发出信号，然后在发生超时时将其杀死
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com