HTML – 如何使我的导航栏略微透明？_html-js-css

概述我想我可以通过使导航栏透明来使我的网站看起来更好,所以你可以看到它下面的图像略微暗淡的版本.我找不到任何告诉我如何做的事情.有人可以帮帮我吗？ @import url(https://fonts.googleapis.com/css?family=Pacifico);@import url(https://fonts.googleapis.com/css?family=Patua+One); 我想我可以通过使导航栏透明来使我的网站看起来更好,所以你可以看到它下面的图像略微暗淡的版本.我找不到任何告诉我如何做的事情.有人可以帮帮我吗？

@import url(https://Fonts.GoogleAPIs.com/CSS?family=Pacifico);@import url(https://Fonts.GoogleAPIs.com/CSS?family=Patua+One); body {  margin: 0px}header {  background: #000;  color: white;  padding: 5px 15px 0px 15px;}header h1 {  Font-size: 30px;  margin: 0;  display: inline;  padding: 30px;  Font-family: 'Pacifico',cursive;}nav ul {  margin: 0;  display: inline;  padding: 50px;}nav ul li {  background: black;  color: white;  List-style-type: none;  display: inline-block;  padding: 20px 35px;  margin: 0px;  Font-family: 'Patua One',cursive;}nav ul li:hover {  color: #999;}#hero,#hero1,#hero2,#hero3,#hero4 {  background-size: cover;  position: relative;  height: 100vh;}#hero {  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/78975-Bread_Vol_6_No_3_zps6copbcw9.jpg);}#hero1 {  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg);}#hero2 {  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/c62d971b378c55d9d5d4eae139c1499f_zps0nqytwmn.jpg);}#hero3 {  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/553697_zpsfrh8bbhc.jpg);}#hero4 {  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg);}.header,.header1,.header2,.header3,.header4 {  position: absolute;  top: 50%;  text-align: center;  wIDth: 100%;  color: #fff;  Font-size: 36px;  -ms-transform: translate(0,-50%);  /* IE 9 */  -webkit-transform: translate(0,-50%);  /* Safari */  transform: translate(0,-50%);}.ArtOfCakes {  wIDth: 300px;  text-align: center;}#ArtOfCakesImage {  wIDth: 600;  height: 600px;  position: absolute;  padding-left: 500px;  padding-bottom: 100px;}#logo {  Font-size: 25px;}p {  Font-size: 20px;}h2 {  Font-size: 65px;}

<! DOCTYPE HTML><HTML><head>  <Title></Title>  <link rel="stylesheet" type="text/CSS" href="stylesheet.CSS"></head><body>  <header>    <nav>      <h1>Molino</h1>      <ul>        <li>Home</li>        <li>Art Of Cakes</li>        <li>Perfect Food</li>        <li>Breakfast</li>        <li>Specials</li>      </ul>    </nav>  </header>  <div>  </div>  <div ID="wrapper">    <div ID="hero">      <div >        <h1>Made with love</h1>        <p>Ut wisi enim ad minim veniam,quis nostrud exerci          <br>tation ullamcorper suscipit lobortis nisl ut          <br>aliquip ex ea commodo consequat. Duis          <br>        </p>      </div>    </div>    <div ID="hero1">      <div >        <h1>Art Of Cakes</h1>        <p>Ut wisi enim ad minim veniam,quis nostrud exerci          <br>tation ullamcorper suscipit lobortis nisl ut          <br>aliquip ex ea commodo consequat. Duis          <br>        </p>      </div>    </div>    <div ID="hero2">      <div >        <h1>Perfect Food</h1>        <p>Ut wisi enim ad minim veniam,quis nostrud exerci          <br>tation ullamcorper suscipit lobortis nisl ut          <br>aliquip ex ea commodo consequat. Duis          <br>        </p>      </div>    </div>    <div ID="hero3">      <div >        <h1>Breakfast</h1>        <h3>7am Breakfast we're Open!</h3>        <p>Ut wisi enim ad minim veniam,quis nostrud exerci          <br>tation ullamcorper suscipit lobortis nisl ut          <br>aliquip ex ea commodo consequat. Duis          <br>        </p>      </div>    </div>    <div ID="hero4">      <div >        <h1>Specials</h1>        <h3>7am Breakfast we're Open!</h3>        <p>Ut wisi enim ad minim veniam,quis nostrud exerci          <br>tation ullamcorper suscipit lobortis nisl ut          <br>aliquip ex ea commodo consequat. Duis          <br>        </p>      </div>    </div>  </div></body></HTML>

解决方法好吧,你可以这样做：

header {    wIDth: 100%;    background: rgba(0,0.7);    color: white;    padding: 5px 15px 0px 15px;    position: fixed;    top: 0;    left: 0;    z-index: 999;}

使用rgba背景获取透明色和固定位置以将其固定在所有内容的顶部.然后你需要给它宽度：100％并删除ul li背景颜色以获得更好的外观.

jsFiddle Demo

总结

以上是内存溢出为你收集整理的HTML – 如何使我的导航栏略微透明？全部内容，希望文章能够帮你解决HTML – 如何使我的导航栏略微透明？所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1086935.html