-1
在加載頁面之前,我的網頁變成白色一秒鐘,似乎並不像所有的背景圖像一起加載(或者它們或者它們不在匯)。我做了一些研究發現了一些關於精靈(沒有工作),也改變了圖片從jpg-> png-> gif和回(我甚至穿過幾個)有人可以幫助我解決這個問題。 PS。不要介意一堆「國王」,他們只是佔位符,看看背景如何跨越。 - 謝謝緩慢的網頁速度
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.
您可以提供一個示例使用?什麼圖像沒有加載,文件名是否正確?沒有足夠的信息給我們知道問題可能是什麼 – 2015-03-08 21:26:47
哦,對不起,我的網頁離線,所以我不能測試速度或「驗證」它,但我很肯定,它非常緩慢,因爲當我刷新或切換鏈接屏幕變爲空白,然後出現的話就會出現背景。我想知道是否有辦法阻止這種情況發生。 – 2015-03-09 00:36:31