分类导航
程序笔记程序问答

为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？

程序问答   发布时间：2022-06-01  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？？

开发过程中遇到为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？的问题如何解决？下面主要结合日常开发的经验，给出你关于为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？的解决方法建议，希望对你解决为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？有所启发或帮助；

我是一名学习 HTML 和 CSS 的学生。对于学校项目，我们需要制作一个简单的游戏，我目前正在设计游戏大厅。

我想在我的背景之上但在我的桌子、按钮和所有东西后面添加一个移动的烟雾/雾覆盖，所以我搜索了一些教程并能够实现这一点。我唯一的问题是烟雾的背景在我代码的其余部分下面。我尝试自己搜索问题，但找不到。

这是雾图像

为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？



为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？

这是一张图片：

为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？

如果有人能帮我找到问题以及如何解决这个问题，那就太棒了！

这是演示版

ValueError: storage_options passed with file object or non-fsspec file path
@Font-face{
    src: url("images/Font.otf");
    Font-family: lobbyFont;
}
.quick_game_button{
    margin-left: 7%;
    margin-top: 60px;
    padding: 5px;
    wIDth: 240px;
    border: 4px solID black;
    height: 80px;
    BACkground-image: url("images/dirtyclothes3.jpg");
    BACkground-size: cover;
    border-radius: 10px;
    z-index: 3;
}
.quick_game_text{
    Font-family: lobbyFont,sans-serif;
    Font-size: 40px;
    margin-top: 17px;
    margin-left: 21px;
    z-index: 3;
}
.quick_game_text:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.lobby_title{
    Font-family: lobbyFont,sans-serif;
    Font-size: 100px;
    margin-top: 40px;
    margin-left: 7%;
    letter-spacing: 1px;
    wIDth: 250px;
    margin-bottom: 10px;
    z-index: 3;
}
body{
    Font-family: sans-serif;
    margin: 0;
    padding: 0;
}
article.BACkground_music{
    BACkground: rgba(43,45,47,.7);
    border: solID black 2px;
    wIDth: 120px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 30px;
}
p.music_text{
    Font-family: "lobbyFont",sans-serif;
    Font-weight: bolder;
    padding-left: 4px;
    display: inline;
    letter-spacing: 1px;
    z-index: 3;
}
#sound_button{
    margin-top: 10px;
    padding-left: 20px;
    display: inline;
    z-index: 3;
}
.online_players_table{
    border: 3px solID black;
    margin-left: 40%;
    margin-top: -215px;
    wIDth: 250px;
    height: 380px;
    border-collapse: collapse;
    z-index: 3;
}
.frIEnds_table{
    border: 3px solID black;
    margin-left: 70%;
    margin-top: -421px;
    wIDth: 250px;
    height: 384px;
    border-collapse: collapse;
    z-index: 3;
}
.caption_titel{
    Font-family: lobbyFont,sans-serif;
    Font-size: 30px;
}
.caption_frIEnds{
    Font-family: lobbyFont,sans-serif;
    Font-size: 30px;
    letter-spacing: 1px;
}
tbody tr:nth-child(odd) {
    BACkground-color: rgba(0,0.70);
    color: dimgrey;
}
tbody tr:nth-child(even) {
    BACkground-color: rgba(43,0.70);
}
.add_frIEnd_text{
    margin: 3px;
    wIDth: 40px;
    Font-family: lobbyFont,sans-serif;
    color: black;
    letter-spacing: 1px;
    border: 1.5px solID black;
    BACkground: rgb(43,47);
    BACkground-size: contain;
    border-radius: 10px;
}
.add_frIEnd_text:hover{
    cursor: pointer;
}
.invite_frIEnd_text{
    margin: 3px;
    wIDth: 58px;
    Font-family: lobbyFont,47);
    BACkground-size: contain;
    border-radius: 10px;
}
.invite_frIEnd_text:hover{
    cursor: pointer;
}
th{
    Font-family: lobbyFont,sans-serif;
    letter-spacing: 1px;
}
.absolute-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    wIDth: 100%;
    BACkground: url("images/1989118_auto_x2.jpg");
    BACkground-position: 50%;
    BACkground-repeat: no-repeat;
    BACkground-size: cover;
    overflow: hIDden;
    z-index: 2;
}
.fog {
    position: relative;
    height: 100vh;
    wIDth: 100%;
    BACkground: #fff;
    z-index: 2;
}
.fog-container {
    position: absolute;
    wIDth: 100%;
    height: 100%;
    overflow: hIDden;
    z-index: 2;
}
.fog-img {
    position: absolute;
    height: 100vh;
    wIDth: 300vw;
    z-index: 2;
}
.fog-img-first {
    BACkground: url("images/fog-1.png");
    BACkground-repeat: repeat-x;
    BACkground-size: contain;
    BACkground-position: center;
    animation: marquee 60s linear infinite;
    z-index: 2;
}
.fog-img-second {
    BACkground: url("images/fog-2.png");
    BACkground-repeat: repeat-x;
    BACkground-size: contain;
    BACkground-position: center;
    animation: marquee 30s linear infinite;
    z-index: 2;
}
@keyframes marquee {
    0% {
        transform: translate3d(0,0);
    }

    100% {
        transform: translate3d(-200vw,0);
    }
}

解决方法

免责声明：这里是新手，所以请加一点盐。 我在下面提供了一个解决方案，它当然不是最优雅的，但可以在不改变太多代码的情况下帮助您。

  • 我们可以暂时完全去掉“fog”类的部分，以简化一些事情。
  • 然后，我们将 'absolute-bg' 类的 div 直接放在 body 下方，确保所有剩余元素都在这个 div 内，因此（视觉上）位于背景的“顶部”。立>
  • 然后，我们将 'absolute-bg' 类设置为比其他所有类都具有更低的 z-index（例如 -1）。
  • 接下来，我们可以获取 'fog-container' 的 div 并赋予它两个简单的 CSS 属性：位置：固定；顶部：0;
  • 这会从文档流中移除元素并将其放置在相对于浏览器窗口的固定位置，在本例中为 top: 0。
  • 最后，您希望能够点击您的 div 'fog-container'，它现在在渲染时位于其他所有内容的“顶部”，因此，我们可以将这两个属性添加到 .fog-container：pointer -事件：无；触摸动作：无；

希望这会有所帮助。优雅，不是吗？朝着正确的方向推动？希望！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./test.css">
  <title>test</title>
</head>

<body>
  <!-- Your fog section is still here but I've commented it out -->
  <!-- <section class="fog"></section> -->
  <div class="absolute-bg">

    <!--lobby title-->
    <p class="lobby_title">LOBBY</p>

    <!--quick game button-->
    <section class="quick_game_button">
      <p class="quick_game_text" id="quick_game_Button">Quick Game</p>
    </section>

    <!--online players table-->
    <table class="online_players_table">
      <caption class="caption_titel">Online Players</caption>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">player 2</th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">player 5</th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">player 8</th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">player 11</th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="add_friend_text">add</p>
        </th>
      </tr>
    </table>

    <!--friends table-->
    <table class="friends_table">
      <caption class="caption_friends">Friends</caption>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">friend2</th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">friend 5</th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">friend 8</th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%">friend 11</th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
      <tr>
        <th style="width: 75%"></th>
        <th>
          <p class="invite_friend_text">invite</p>
        </th>
      </tr>
    </table>

    <!--BACkground music script-->
    <article>
      <script type="text/javascript">
        function playpause() {
          let snd = document.getElementById("sound");
          let snd_btn = document.getElementById("sound_button");
          snd.muted = !snd.muted;
          if (snd.muted) {
            snd_btn.innerHTML = "<img alt='Pause The Music' title='Music Paused' src='https://cdn3.iconfinder.com/data/icons/eightyshades/512/30_Sound_off-24.png' />";
          } else {
            snd_btn.innerHTML = "<img alt='Play The Music' title='Music Playing' src='https://cdn3.iconfinder.com/data/icons/eightyshades/512/29_Sound_alt-24.png' />";
          }
        }
      </script>
      <audio autoplay loop id="sound" src="music/[HQ 1080p]Call of Duty Black Ops Multiplayer Menu Music + Download Link (mp3cut.net).mp3" type="audio/mp3"></audio>
    </article>
    <article class="BACkground_music">
      <p class="music_text">MUSIC</p>
      <div id='sound_button' onClick="playpause()"><img title='Music Playing' alt='Play The Music' src='https://cdn3.iconfinder.com/data/icons/eightyshades/512/29_Sound_alt-24.png' /></div>
    </article>

    <!--fog BACkground-->

    <div class="fog-container">
      <div class="fog-img fog-img-first"></div>
      <div class="fog-img fog-img-second"></div>
    </div>
  </div>
  </section>
</body>

</html>

@font-face{
    src: url("images/font.otf");
    font-family: lobbyfont;
}
.quick_game_button{
    margin-left: 7%;
    margin-top: 60px;
    padding: 5px;
    width: 240px;
    border: 4px solid black;
    height: 80px;
    BACkground-image: url("images/dirtyclothes3.jpg");
    BACkground-size: cover;
    border-radius: 10px;
    z-index: 3;
}
.quick_game_text{
    font-family: lobbyfont,sans-serif;
    font-size: 40px;
    margin-top: 17px;
    margin-left: 21px;
    z-index: 3;
}
.quick_game_text:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.lobby_title{
    font-family: lobbyfont,sans-serif;
    font-size: 100px;
    margin-top: 40px;
    margin-left: 7%;
    letter-spacing: 1px;
    width: 250px;
    margin-bottom: 10px;
    z-index: 3;
}
body{
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
article.BACkground_music{
    BACkground: rgba(43,45,47,.7);
    border: solid black 2px;
    width: 120px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 30px;
}
p.music_text{
    font-family: "lobbyfont",sans-serif;
    font-weight: bolder;
    padding-left: 4px;
    display: inline;
    letter-spacing: 1px;
    z-index: 3;
}
#sound_button{
    margin-top: 10px;
    padding-left: 20px;
    display: inline;
    z-index: 3;
}
.online_players_table{
    border: 3px solid black;
    margin-left: 40%;
    margin-top: -215px;
    width: 250px;
    height: 380px;
    border-collapse: collapse;
    z-index: 3;
}
.friends_table{
    border: 3px solid black;
    margin-left: 70%;
    margin-top: -421px;
    width: 250px;
    height: 384px;
    border-collapse: collapse;
    z-index: 3;
}
.caption_titel{
    font-family: lobbyfont,sans-serif;
    font-size: 30px;
}
.caption_friends{
    font-family: lobbyfont,sans-serif;
    font-size: 30px;
    letter-spacing: 1px;
}
tbody tr:nth-child(odd) {
    BACkground-color: rgba(0,0.70);
    color: dimgrey;
}
tbody tr:nth-child(even) {
    BACkground-color: rgba(43,0.70);
}
.add_friend_text{
    margin: 3px;
    width: 40px;
    font-family: lobbyfont,sans-serif;
    color: black;
    letter-spacing: 1px;
    border: 1.5px solid black;
    BACkground: rgb(43,47);
    BACkground-size: contain;
    border-radius: 10px;
}
.add_friend_text:hover{
    cursor: pointer;
}
.invite_friend_text{
    margin: 3px;
    width: 58px;
    font-family: lobbyfont,47);
    BACkground-size: contain;
    border-radius: 10px;
}
.invite_friend_text:hover{
    cursor: pointer;
}
th{
    font-family: lobbyfont,sans-serif;
    letter-spacing: 1px;
}
.absolute-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    BACkground: url("images/1989118_auto_x2.jpg");
    BACkground-position: 50%;
    BACkground-repeat: no-repeat;
    BACkground-size: cover;
    overflow: hidden;
    z-index: -1;
}

/* not using this for now */

/* .fog {
    position: relative;
    height: 100vh;
    width: 100%;
    BACkground: #fff;
    z-index: 2; */
    
.fog-container {
    position: fixed;
    top: 0;
    width: 100%;
    height: 120%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    touch-action: none;
}
.fog-img {
    position: absolute;
    height: 100%;
    width: 300vw;
    z-index: 2;
}
.fog-img-first {
    BACkground: url("images/fog-1.png");
    BACkground-repeat: repeat-x;
    BACkground-size: contain;
    BACkground-position: center;
    -webkit-animation: marquee 60s linear infinite;
            animation: marquee 60s linear infinite;
    z-index: 2;
}
.fog-img-second {
    BACkground: url("images/fog-2.png");
    BACkground-repeat: repeat-x;
    BACkground-size: contain;
    BACkground-position: center;
    -webkit-animation: marquee 30s linear infinite;
            animation: marquee 30s linear infinite;
    z-index: 2;
}
@-webkit-keyframes marquee {
    0% {
        transform: translate3d(0,0);
    }

    100% {
        transform: translate3d(-200vw,0);
    }
}
@keyframes marquee {
    0% {
        transform: translate3d(0,0);
    }
}

大佬总结

以上是大佬教程为你收集整理的为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？全部内容，希望文章能够帮你解决为什么我的 HTML 网站上的正文和动画背景是分开的（不是在彼此之上）？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：为什么我的
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap