Question

我正在为我的朋友制作一个网站，但在使用CSS时，图像不会显示。

<html>
    <head>
        <title>Bobby & Rose | Pillow Service</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <div class="wrapper">

        </div>

    </body>
</html>

CSS：

* {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    background-color: grey;
}
.wrapper {
    margin: 30px;
    background-image: url(../img/warpper.png);
}

我的图片是标题菜单背景，但是当我尝试网站时它没有出现。

Answer 1

HTML中存在错误

<title>Bobby & Rose | Pillow Service</title>

解决方案 - JSFIddle

<强> HTML

<title>Bobby &amp; Rose | Pillow Service</title>

<强> CSS

.wrapper {
    width: 100%;
    background-image: url(../img/warpper.png);
    min-width: 100px;
    min-height: 100px;
}

如果仍然没有在你的工作结束，那么你应该检查图像的路径是不正确的。

Answer 2

DIV没有内容因此大小为0x0px，意味着无法显示图像。

添加

width:200px;
height:200px;

到你的CSS。而不是200px，你可以随心所欲。

Answer 3

确定尺寸，我也使用 id 而不是 class

CSS

#wrapper {
height:200px; <!--on me here -->
margin: 30px;
background-image:url('wrapper.png');
 }

HTML

<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="wrapper">

</div>

Answer 4

注意到你的图片名称是拼写的＆＃39; warpper＆＃39;而div是包装＆＃39;。

也许两个字母正在切换？

另一方面 - 根据图片的大小以及您希望它如何填充div，您可能需要添加：

background-size: contain;

CSS背景图像没有显示在元素上

4 个答案: