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