我无法显示背景图像。我认为添加 min-width 可能会使图像可见,以防它真的很小,但这没有用。我检查了网址。如果直接放入体内,它可以作为正常图像使用。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
</head>
<body>
<div id = backs </div>
<div class = header>
<p>
<img src = http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id = gecko>
</p>
<div class = navigation>
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<p>
<div class = main>
<p1> Our Eggs
</p1>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content:url(http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width:800px;
padding-left: 150px;
position: absolute;
}
.main {
color: black;
font-size: 60px;
position: relative;
top: 150px;
background-image: url (http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
min-width: 100%;
height: 900px;
border: 2px solid red;
padding-top: 100px;
}
最佳答案
background-image
中图像路径的格式是 url(...)
而不是 url (...)
所以你的台词应该是
background-image: url(http://files.vividscreen.info/soft/fc5e9b0dc8833c69951d28bb856b9ef4/Decorated-Easter-Eggs-2880x1920.jpg);
关于html - 不显示背景图像 (HTML),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42105077/