我的网页在加载页面之前会变白一秒钟，似乎并非所有背景图像都一起加载（要么是那样，要么是它们不在接收器中）。我做了一些关于精灵的研究发现了一些关于精灵的东西（不起作用），并且还将图片从 jpg->png->gif 更改回来（我什至跨越了一些）有人可以帮助我解决这个问题。不要介意那群"国王"，他们只是占位符，看看背景是如何跨越的。 -谢谢
.CSS：
* {
margin:0px;
padding:0px;
list-style-type:none;
}
html{
background-image:url("Aba2.jpg");
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
text-align:center;
}
header, section, footer, aside, nav,article{display:block}
#Wrapper{
width:1100px;
margin:20px auto;
}
#H_wrap{
padding:10px;
height:150px;
background-image:url("Abracci1.jpg");
background-repeat:repeat-x;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#M_head{
padding:10px;
font:italic bold 34px/30px "Times New Roman" Times, arial;
Text-align:center;
color:#000000;
text-shadow:2px 2px #999999;
text-decoration:underline;
}
#N_bar {
padding:40px;
text-align:center;
word-spacing:6em;
font:italic bold 25px/30px "Times New Roman" Times, arial;
text-shadow:3px 3px grey;
}
a:link.NB{
color:white;
}
a:visited.NB{
color:black;
}
a:hover.NB{
color:GOLD;
}
a:active.NB{
color:#423243;
}
#N_bar li{
display:inline-block;
}
#M_section{
background-image:url("Aba3.jpg");
background-position:center;
padding:20px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
END CSS.
HTML:
<!Doctype html>
<html lang="eng">
<head>
<meta charset="uft-8"/>
<link rel="stylesheet" href="Abracci_main.css"/>
</head>
<html>
<body>
<div id="Wrapper">
<div id="H_wrap">
<header id="M_head">
<h1>Abracci</h1>
</header>
<nav id="N_bar">
<ul>
<li><a class="NB" href="https://css-tricks.com/perfect-full-page-background-image/">Men</a></li>
<li><a class="NB" href="#">Women</a></li>
<li><a class="NB" href="#">Children</a></li>
<li><a class="NB" href="#">Apparel</a></li>
</ul>
</nav>
</div>
<section id="M_section">
<li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li> <li>King</li>
</section>
<aside id="M_aside">
</aside>
<footer id="M_footer">
</footer>
</div>
</body>
</html>
}
END HTML.
使用验证器，以及Chrome，Firefox或Internet Explorer中的浏览器开发人员工具。网络选项卡将准确告诉您正在发生的事情。请修复问题的格式（缺少 html 标签、额外 } 等