如何使导航栏略微透明？

时间：2016-03-16 08:09:09

标签： html css

我认为通过使导航条变得透明可以让我的网站看起来更好，所以你可以看到它下面的图像略微暗淡的版本。我找不到任何告诉我如何做的事情。有人可以帮帮我吗？

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<! 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 class="header">
        <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 class="header1">
        <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 class="header2">
        <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 class="header3">
        <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 class="header4">
        <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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

嗯，你可以这样做：

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

使用rgba背景获取透明色和fixed位置以将其固定在所有内容的顶部。然后你需要给它width: 100%并删除ul li背景颜色以便更好看。

<强> jsFiddle Demo

答案 1 :(得分：1)

您可以使用background: rgba(0,0,0,.3);

设置背景颜色透明度

有关RGBa的更多信息。

要在标题下移动图片，请添加一些css，如：

header {
   position: absolute;
   z-index: 99;
}

JSFiddle Demo

答案 2 :(得分：1)

滚动时使用它看起来不错

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
 body {
  margin: 0px
}
header {
  background: rgba(0, 0, 0, 0.58);
  color: white;
  padding: 5px 15px 0px 15px;position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
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 {
  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;
}
＆＃13; 
<! 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 class="header">
        <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 class="header1">
        <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 class="header2">
        <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 class="header3">
        <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 class="header4">
        <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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

你必须使标题＆＃34;不太稳固＆＃34;用：

background: rgba(0, 0, 0, 0.8);

或与：

opacity: 0.8;

您可以在此处了解其中的差异：CSS opacity vs rgba: which one is better?

删除ul e li color

然后你必须把标题放在页面上：

position: fixed;
z-index: 100;

如果您想要固定位置或

position: absolute;
z-index: 100;

如果你想要标题滚动

用以下方式拉伸标题：

width: 100%;
相关问题
最新问题