时间戳

首页 > 解决方案 > 如何用 CSS 中的图像和导航解决这个问题

html - 如何用 CSS 中的图像和导航解决这个问题

问题描述

问题是当我放置具有绝对位置的图像并且它通过导航的背景时，图像越过导航，并且想法是它在导航后面[在此处输入图像描述] [1]

示例：[1]：https ://i.stack.imgur.com/ZsXWN.png

代码 CSS：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-color: #110047;
    color: white;
    background-image: url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%2308778e' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    font-size: 14px;
    font-family: 'Alfa Slab One', cursive;
}
header {
  background: url('img/untitled.png') no-repeat center;
  background-attachment: fixed;
}
#title {
    width: 100%;
    height: 49vh;
    padding-bottom: 827px;
    }
#titlex {
  margin-top: 260px;
  margin-left: 380px;
  font-size: 110px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: rgb(0, 68, 255);
  position: fixed;
}
#titley {
  margin-top: 260px;
  margin-left: 370px;
  font-size: 110px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: rgb(0, 132, 255);
}

ul {
    list-style: none;
  }

a {
    color: white;
    text-decoration: none;
}

/* NAVIGATION */
.nav-main {
    background-color: black;
    position: fixed;
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 20px;
}

.map {
    margin-top: 100px;
    width: 150px;
    width: 7%;
    margin-left: 180px;
    margin-right: 120px;
  }

  .nav-main ul {
    margin-left: 120px;
    display: flex;
  }

.nav-main ul li {
    padding: 0px;
}
.nav-main ul li a {
    margin-top: 130px;
    cursor: pointer;
    display: inline-block;
    margin-right: 20px;
    margin-left: 40px;
    border: 0;
    color: #fff;
    font-size: 20px;
    transition-duration: 0.5s;
    transition-property: all;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
.nav-main ul li a:hover {
    border-bottom: 3px solid rgb(69, 131, 212);
    color:rgb(69, 131, 212);
    padding-bottom: 3px;
  }








/* ABOUT US */

#about {
  background-image: url('img/ublogoa.png');
  background-repeat: no-repeat;
  background-position-y: 40px;
  background-position-x: 1000px;
  background-color: #fff;
  padding-bottom: 400px;
}
.lol {
  margin-top: 70px;
  position: absolute;
  display: block;
  width: 80%;
  height: auto;
  margin-left: -250px;
}
#about1 {
  background-image: url('img/blacktetas.png');
  background-repeat: no-repeat;
  background-position-y: 40px;
}
#titlea {
  padding-top: 70px;
  color: rgb(151, 151, 151);
  margin-left: 605px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#under {
  margin-left: 600px;
  color:rgb(47, 103, 255);
  font-size: 50px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#dialog1 {
  margin-left: 600px;
  margin-right: 150px;
  margin-top: 50px;
  color:rgb(151, 151, 151);
  font-size: 17px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#dialog2 {
  margin-left: 600px;
  margin-top: 30px;
  margin-right: 150px;
  color:rgb(151, 151, 151);
  font-size: 17px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#dialog3 {
  margin-left: 600px;
  margin-top: 30px;
  margin-right: 150px;
  color:rgb(151, 151, 151);
  font-size: 17px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#dialog4 {
  margin-left: 600px;
  margin-top: 30px;
  margin-right: 150px;
  color:rgb(151, 151, 151);
  font-size: 17px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

代码 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UnderBlocks</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="img/ublogoa.png">
</head>
<header>
    <div id="title">
        <div class="nav">
            <nav class="nav-main">
                <ul class="nav-menu">
                    <li>
                    <a class="left" href="#about-us">ABOUT US</a>
                    </li>
                    <li>
                    <a class="left" href="#marketplace">MARKETPLACE</a>
                    </li>
                    <img src="img/whitelogo.png" alt="Marketplace Logo" class="map">
                    <li>
                    <a class="right" href="#contact-us">CONTACT US</a>
                    </li>
                    <li>
                    <a class="right" href="#portfolio">PORTFOLIO</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<body>
    <a name="about-us">
    <div id="about">
        <img src="img/sheguel.png" alt="Render Minecraft" class="lol">
        <h3 id="titlea">ABOUT</h3>
        <h1 id="under">UNDERBLOCKS</h1>
        <h4 id="dialog1">UnderBlocks, is a Studio focused on creating content for the Mojang or Minecraft Marketplace, which has been uploading content to the Marketplace for more than 6 months, and will continue to upload content for the public, we focus on uploading maps, skinpacks, texturepacks, add-ons and more for the entire Minecraft community to enhance its gameplay in a potential way.</h4>
        <h4 id="dialog2">Our main objective is to create the best content for the Minecraft public, respecting the Mojang rules and conditions to be able to upload our content, for all the public, every day we have new ideas to improve and expand UnderBlocks, and every day we have new projects. which we have planned to upload after everything is finished and with 0 failures</h4>
        <h4 id="dialog3">We have managed to upload our first content to the Marketplace on August 25, 2020, it was a day of celebration for the entire UnderBlocks team, since it would be our first content uploaded to the public from the Marketplace, after that we continue to be inspired by upload more content and every day more excited to upload our types of content, skinpacks, maps, add-ons and more</h4>
        <h4 id="dialog4">On August 22 we finally managed to become an official partner with Mojang and be able to upload our content from our own hands to the Marketplace, as our first content uploaded was a day of joy and happiness, and we returned inspired by uploading new types of content and we will continue uploading great types of content for the Minecraft community</h4>
    </div>
    <a name="portfolio">
    <div id="portfolio">
        
    </div>
    <script src="scripts/main.js"></script>
</body>
</html>

这些是网络的代码，其类的图像是大声笑，请我需要帮助

标签： htmlcss

解决方案

推荐阅读