时间戳

首页 > 解决方案 > 我可以让固定文本在横幅之后消失吗？

html - 我可以让固定文本在横幅之后消失吗？

问题描述

在此处输入图像描述在此处输入图像描述目前，我的横幅中有一个固定的文本和一个固定的导航栏。我希望文字在横幅图像之后消失。导航栏可以在整个页面上保持固定。但我希望文字在图像之后消失！有没有办法为固定元素设置边界。否则有没有办法在背景上获取固定文本，这样它就不会出现在我的主要内容上，而是出现在它的后面。多谢你们！！

body {
  margin: 0;
  padding: 0;
  font: font-family: myriad-pro, sans-serif;
  position:relative;
  
}


.text {
  display: inline-block;
  width: 100%;
  text-align: center;
  position:fixed;
  top: 200px;
  color: white;
  border-style: none;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 80%;
  font-family: myriad-pro, sans-serif;
  font-weight: 100;
  font-size: 35px;
  font-style: italic;
  border-style: none;
}

#text2{
  margin-left: 200px;
  font-weight: 100;
  opacity: 60%;
  margin-top: -40px; 
  
  
}

.image {
  filter: brightness(40%);
}

li:hover{
  background-color: darkgrey;
}


li {
  list-style-type: none;
  color: aqua;
  float: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 17px;
  font-family: myriad-pro, sans-serif;
  font-weight: lighter;
  
  
  
}
a.list{ 
  color: black;
  text-decoration: none;
  white-space: 20px;
}


.navbar {
  display: inline-block;
  text-align: right;
  background-color: white;
  opacity: 53%;
  width: 100%;
  position:static;
  top: 20%;
  border-style: none;
  position: fixed;
  top: 25px;
  width: 100%;
  white-space: 80px;
  z-index: 9;
}

.logo{
  text-align: left;
  padding-left: 20px;
  margin-top: -11px;
}

.marcel{
  display: block;
  background-color: antiquewhite;
  margin: 250px 250px;
  text-align: center;
 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="./test.css">
  <link rel="stylesheet" href="https://use.typekit.net/wbf4zoi.css">
  <title>Edusolut</title>

</head>

<body>
  <nav class="navbar">
  
    <ul>
      <li><a class="list" href="#"> Home</a></li>
      <li><a class="list" href="#"> Service</a></li>
      <li><a class="list" href="#"> Contact</a></li>
      <li><a class="list" href="#"> Training</a></li>
    </ul>
      
    <div class="logo">
      <img src="logo3.png" width="120px" />
    </div>
  </nav>
  <div role="banner">
    <div class="image">
      <img src="./computer-2565478_1280.jpg" alt="computer" height="630rem" width="100%">
    </div>
    <div class="text">
      <h1>Edusolut</h1>
      <div id="text2">
        <p>Your Education Solution.</p>
      </div>
    </div>

  </div>
</body>
  
<body id="main">
  <div class = "marcel" >
    <img src="./marcel.png">
    
    <h3> Netwerk en Trainig consultancy</h3>

标签： htmlcssfixedbanner

解决方案

推荐阅读