HTML背景圖像根本不顯示
[英]html background image not showing at all
問題描述
我從頭開始創建了一個網站，到目前為止它還很空。 我開始了第一個div，即CSS，然后像往常一樣遇到了一個問題。 背景圖像不會顯示。 我試圖將目錄更改為與HTML相同（通常在/ assets / img /中）。 我還把它放到了Photoshop中，並把它導出為png，以防出現問題。 當我使用背景色代碼時，它可以工作，但無法使圖像工作。 病態顯示如下代碼：
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="apple-touch-icon" href="assets/img/logo.png"/>
<link rel="shortcut icon" href="assets/img/logo.png"/>
<link rel="stylesheet" href="assets/css/style1.css"/>
</head>
<body>
<div id="content">
<h1>content</h1>
</div>
</body>
</html>
CSS：
body, html {
margin: 0;
padding: 0;
font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
width: 100% !important;
height: 100% !important;
background-image: url('../assets/img/backdrop.png');
background-color: transparent;
}
h1,h2,h3,h4,h5,h6 {
margin: 0 0 .5em;
font-weight: 500;
line-height: 1.1;
}
h1 { font-size: 2.25em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.375em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .875em; }
#content {
max-width: 80em;
margin: 0 auto;
background-color: rgba(255,255,255,.3);
}
.img-responsive { max-width: 100%; }
2 個解決方案
解決方案1
2 已采納 2018-01-31 10:11:17
我認為您的img鏈接有錯誤，請更改此：
background-image: url('../assets/img/backdrop.png');
對此：
background-image: url('../img/backdrop.png');
解決方案2
0 2018-01-31 10:31:43
嘗試將其更改為
background-image: url('../img/backdrop.png');
HTML背景圖片未顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.