Question

所以我正在尝试最小化我的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在：\网站\ thispage \ images \ css

所以对我来说没有意义，为什么这可能不起作用。我也尝试将图像放在我的css文件夹中并将我的URL更改为（'austria.png'）;但没有做任何事。

另一方面，使用它就像一个魅力：

<div id="pic1">
<a href="index.html">
<img src="images/pic1.png">
</a>
</div>

但是我想要css中的所有内容而不是html。

Answer 1

有两个问题;图片网址错误，您还没有为元素指定任何尺寸，因此高度将为零。

由于css文件夹位于图片文件夹中，因此您只能使用../来访问它。

示例：

#pic1
{
    position: absolute;
    background: #ffffff;
    background-image: URL('../pic1.png');
    width: 200px;
    height: 100px;
}

Answer 2

如果images/css引用images文件夹中的文件夹名称css，则路径应为：

URL('../pic1.png')

但是，如果images/css引用了图像文件夹中保存的css文件以及图像，那么路径应为：

URL('/pic2.png')

另外，正如Guffa所提到的，您需要指定背景图片的大小，可能是特定像素，百分比或使用background-size: cover，background-size: contain等

Answer 3

它应该是background-image：URL（'../ pic2.png'）;

但将css文件夹放在images文件夹中是没有意义的

做

file.html
/images
/css

然后你可以使用background-image：URL（'../ images / pic2.png'）;

将其放入css时图像不显示

3 个答案: