所以我正在尝试最小化我的 html 代码并将所有内容移动到我的 css 文件中。问题是，在为其编写 css 代码时，我似乎无法使图像正常工作。
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<title>
Some title
</title>
</head>
<body>
<div id="pic1"></div>
<div id="pic2"></div>
<div id="top">
<h2 class="inner" id="banner">Some banner</h2>
<ul>
<li><a href="index.html" id="menu">Home</a></li>
<li><a href="event.html" id="menu">Events</a></li>
<li><a href="about.html" id="menu">Info</a></li>
<li><a href="contact.html" id="menu">Contact</a></li><hr>
</ul>
</div>
CSS:
#pic1
{
position: absolute;
background: #ffffff;
background-image: URL('../images/pic1.png');
}
#pic2
{
position: absolute;
right: 0px;
background: #ffffff;
background-image: URL('../images/pic2.png');
}
#top
{
height:100px;
width:100%;
color: #0565a8;
text-align:center;
/* background: URL(../images/top.png);
background-repeat: repeat-x; */
background-color:#0565a8;
box-shadow: 0px 1px 1px #000000;
}
现在我的 pic1.png 和 pic2.png 图片位于:\Websites\thispage\images
我的 css 在:\Websites\thispage\images\css
所以这对我来说没有意义，为什么这可能行不通。我还尝试将图像放入我的 css 文件夹并将我的 URL 更改为 ('austria.png');但什么也没做。
旁注，使用它就像一个魅力:
<div id="pic1">
<a href="index.html">
<img src="images/pic1.png">
</a>
</div>
但我希望一切都在 css 而不是 html 中。
最佳答案
有两个问题；图片 URL 错误，并且您没有为元素指定任何大小，因此高度将为零。
由于 css 文件夹在图像文件夹中，您应该只使用 ../ 来访问它。
例子:
#pic1
{
position: absolute;
background: #ffffff;
background-image: URL('../pic1.png');
width: 200px;
height: 100px;
}
关于html - 将图像放置在 css 中时不显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29335534/