为什么css中不显示背景图像？答案

【问题标题】：Why won't background-image display in css?为什么css中不显示背景图像？
【发布时间】：2013-07-02 08:11:26
【问题描述】：

我有一个标题，我正在尝试通过图像文件对其应用背景纹理。 html、css 和图像文件都在同一个目录中。这是html：

<body>
<div id=header>
  <div id=picture>
    <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>
  </div>
  <div id=caption>
    <h1>BannerText</h1>
  </div>
</div>
</body>

这是外部样式表代码：

#header
{
  background= url('texture.png');
  width:98%;
}

纹理图像未出现。如果我用原来body标签的background属性，也就是

<body background="texture.png">

确实有效。这告诉我这不是 url 的问题，并且所有三个文件都在同一个文件夹中，因此 html 和 css 文件中的相对路径是相同的。为什么纹理图像不显示为标题 div 的背景？

【问题讨论】：

首先，虽然这可能是一个错字，但在您的顶部应该是<img src="picture.jpeg" alt.....
外部工作表是否与您的页面在同一目录中？文件texture.png 将从您的样式表所在的任何目录中提取，因为您没有指定目录 - 也是 fakeheal 所说的。

标签： html css image background

【解决方案1】：

这是background: url('texture.png');，而不是background= url('texture.png');。

还有

<img src="picture.jpeg" alt="Profile" align="right" width="180" height="180"/>

没有

<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>

最好将属性值用引号括起来。对 - <div id="picture">,

不好 - <div id=picture>

【讨论】：

另外，请确保图片资源的根路径正确。
@Netizen，是的，使用 Chrome 的开发人员工具（或其他浏览器上的类似工具）并查看控制台也很酷。如果未找到或未正确加载外部文件（图像、css、js），则会出现 404 错误。

【解决方案2】：

您应该将<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/> 更改为<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>，并且在您的css 中应该是{background: url('urimageurl.jpg');。确保路径/路由（例如 http://yourcsspath.come/css/it.css 不会与 ../yourimg.png 对应，因为它不是路由域的路径！）。谢谢

【讨论】：