网站图片未显示 CSS答案

【问题标题】：Website image not being displayed CSS网站图片未显示 CSS
【发布时间】：2016-10-07 22:07:07
【问题描述】：

我一直在做一个网站，我遇到了一个问题，因为图像不想显示在屏幕上。但是，我已经多次检查代码，一切似乎都是正确的！并且图像也位于 php 文件的同一文件夹中。我真的不知道为什么会这样。你能帮我弄清楚吗？谢谢！

这是代码：

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
<style>
body{
    background-color: black;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
    color:white;
    font-size:80px;
    text-align:center;
}
.container {
    width: 1000px;
}
.div1 {
    background-image: url("pic1.jpg");
}

</style>
</head>
<body>
<h1>Restaurant</h1>

<div class="container">
<div class="div1">
</div>
</div>
</body>
</html>

【问题讨论】：

图片在哪里？
你的 div 没有高度。默认情况下，div 是块元素并占据其容器的整个宽度，但没有设置任何内容或高度，它们没有。
@Matt Cremeens 它位于 php 文件的同一个文件夹中。我已经检查了多次
使用 Chrome 或 Firefox 检查您的开发者工具，查看浏览器是否成功检索到 pic1.img。即，如果它是200，那么图像是成功的，你的问题是你的 css/html。如果是400 或500 错误，则无法检索图像。
@rrauenza 图像被成功检索，因为当我使用标签时它运行良好。但是，我不能使用标签，因为我需要使用
的标签，因为我必须添加多个图像。

标签： html css image web

【解决方案1】：

您的代码是正确的。您唯一需要做的就是向您的 div 添加内容，例如

<div class="div1"><h2>Here is another caption</h2></div>

在h2区域会有你指定的背景图片。

【讨论】：

我试过你说的，它奏效了。但是我得到了同一张图片的多次重复。唯一的问题是我只想要一张完整的图像而没有任何重复。

【解决方案2】：

.div1 {
height: 610px;
width: 100%;
background: url("https://images-contests.99static.com/FtR2bRSgATkGUAOWom3RW3FznWQ=/fit-in/900x675/99designs-contests-attachments/0/384/attachment_384160");
background-size: 100% 100%;
background-repeat: no-repeat;
}

如果您要在没有其他内容的 div 中使用背景图像来为其指定尺寸，则需要指定该 div 的高度和宽度，以便显示图像。 https://jsfiddle.net/g5gL1ue7/

【讨论】：