HTML – 如何使CSS背景图像变暗？

我把头发拉过来.我已经尝试了所有我发现的东西,此时我猜我一定是犯了某种错误.我试图使背景图像变暗,使其不那么饱和.

这是我的HTML：

<body id="home">
    <header>
        <nav>
            <ul class="pull-left">
                <li><a href="#">Bearbeard logo</a></li>
                <li><a href="#">World</a></li>
            </ul>
            <ul class="pull-right">
                <li><a href="#">Eretikas</a></li>
                <li><a href="#">Custom</a></li>
            </ul>
            <div id="slogan">THE HERETIC SWORD</div>
        </nav>
    </header>
</body>

而我的CSS：

#home {
  background-image: url(file:///Volumes/Animus/Jon/DropBox/website/hellcity.jpg);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}
nav li {
  display: inline;
  position: relative;
  float: left;
}
nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}
#slogan {
  color: #FFFAF0;
  font-family: 'Raleway',sans-serif;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.5;
  text-align: center;
  font-weight: bold;
}

这给了我一个完全覆盖页面的背景.但是我想让它变暗(没有悬停或点击).我尝试过的所有东西都没有任何变暗(我尝试过假的渐变,反叛等等),并以某种方式妨碍了< div id =“slogan”>和< nav>,将它们全部推到一起.

我的格式是完全错误的吗？

解决方法

#home {
   background: linear-gradient( rgba(0,0.5),rgba(0,0.5) ),url('file:///Volumes/Animus/Jon/DropBox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work

HTML – 如何使CSS背景图像变暗？

解决方法

相关文章