css背景图像弄乱了身体背景颜色

时间:2017-09-30 15:49:56

标签: html css

整个页面的背景应为#111111。我的带有重复背景的导航栏似乎会改变导航栏及其上方背景的颜色。我不知道我在这里缺少什么

这是我得到的: enter image description here

这应该是这样的:

enter image description here

/ 的index.html /

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SomeWhere | Home</title>
<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container" >
		<header>
			<nav class="topnav">

			</nav>	
		</header>	

		
	</div>
</body>
</html>

/ 的style.css /

/* CSS Document */
body{
	background-color: #111111;
}
#container{
	width: 100%;
	height: 100%;
	background-color: #111111;
	color: #ffffff;
	
}

nav.topnav{
  margin: 0;
  top: 138px;
  left: 0;
  width: 100%;
  height: 54px;
  background: #111111 url(../imgs/nvbck.png) repeat;
  position:absolute;
  z-index:-1;
}

2 个答案:

答案 0 :(得分:0)

复制时看起来不错: https://jsfiddle.net/Sixtus78/97r4mm39/

&#13;
&#13;
/* CSS Document */

body{
	background-color: #111111;
}

.container{
	width: 100%;
	height: 100%;
	background-color: #111111;
	color: #ffffff;
	
}

nav.topnav{
  margin: 0;
  top: 138px;
  left: 0;
  width: 100%;
  height: 54px;
  background: #111111 url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/bo_play_pattern.png) repeat;
  position:absolute;
  z-index:-1;
}
&#13;
<div class="container" >
		<header>
			<nav class="topnav">
        Nav
			</nav>	
		</header>	
		<div class="hero">
		  Hero
		</div>
		<div class="content">
			Content
		</div>
		<footer></footer>
		
	</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在测试了其他几个浏览器并看到这只发生在chrome中之后,我将chrome重置为默认值并重新启动chrome而没有任何结果。我决定完全卸载chrome并进行全新安装。这显然解决了我遇到的问题。