簡體   English   中英

HTML / CSS背景圖片不顯示

[英]HTML/CSS Background Image doesn't display

我想為頁面設置背景圖像,但是當我使用CSS設置背景圖像時,它不會顯示,並且我的BG保持空白。 這是我的CSS代碼:

body {
background-image: url("Images/bg.png");
}

hr {
margin-left: 12%;
margin-right: 12%;
color: #000000;
background-color: #000000;
height: 3px;
}

h1 {
text-align: center ;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 300%;
}

h3 {
text-align: left ;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 150%;
}

#menu {
text-align: center;
}

.titles {
margin-left: 12%;
margin-right: 12%;
}

p {
text-align: justify ;
font-family: Verdana;
margin-right: 12%; 
margin-left: 12%; 
} 

這是我的HTML代碼:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Homepagina Olympische Spelen" />
<meta name="keywords" content="welkom, homepagina, olympische spelen, olympic games, sporten" /> 

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> 
<link rel="icon" href="images/favicon.ico" type="image/x-icon" /> 

<link href="styles/eersteStijl.css" rel="stylesheet" type="text/css">
<title>Olympische Zomerspelen</title>

</head>

<body>

<h1>Olympische Spelen</h1>

<div id="menu">
<a href="index.html"><img
src="images/buttons/home_btn.png"
alt=""
onmouseover="this.src='Images/buttons/home_btn_rollover.png';"
onmouseout="this.src='Images/buttons/home_btn.png';"
/></a>

<a href="info.html"><img
src="images/buttons/info_btn.png"
alt=""
onmouseover="this.src='Images/buttons/info_btn_rollover.png';"
onmouseout="this.src='Images/buttons/info_btn.png';"
/></a>

<a href="contact.html"><img
src="images/buttons/contact_btn.png"
alt=""
onmouseover="this.src='Images/buttons/contact_btn_rollover.png';"
onmouseout="this.src='Images/buttons/contact_btn.png';"
/></a>
</div>

<hr>

<div class="titles"><h3>Welkom</h3></div>
<p>
[Some text here]

<p>
<video width="320" height="240" poster="images/video_start.jpg">
<source src="Images/olympic_games_promo.mp4" /> 
<source src="Images/olympic_games_promo.webm" />
Uw browser ondersteunt geen video.
</video>
</p>

<div class="titles"><h3>Olympische Spelen</h3></div>
<p>
[More text]
</p>

<div class="titles"><h3>Amateurs en beroepsporten</h3></div>
<p>
[And more text] 
</p>

<p>
<img src="Images/olympisch_stadion.jpg" alt="Olympisch Stadion" /> <br> 
<i>Olympisch Stadion in Athene</i>
</p>

</body>
</html>

除了BG圖像外,CSS中的所有內容都有效,有人知道嗎?

提前致謝。

您的路線是錯誤的。 您的樣式表位於“樣式”文件夾中。

您需要“ /Images/bg.png”進入根目錄

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM