HTML – 如何使CSS背景图像变暗?
发布时间:2020-12-14 23:40:08 所属栏目:资源 来源:网络整理
导读:我把头发拉过来.我已经尝试了所有我发现的东西,此时我猜我一定是犯了某种错误.我试图使背景图像变暗,使其不那么饱和. 这是我的HTML: body id="home" header nav ul class="pull-left" lia href="#"Bearbeard Logo/a/li lia href="#"World/a/li /ul ul class
我把头发拉过来.我已经尝试了所有我发现的东西,此时我猜我一定是犯了某种错误.我试图使背景图像变暗,使其不那么饱和.
这是我的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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |