使用样式表时未在 html 上调用背景图像答案

【问题标题】：background images not being called on html when using stylesheet使用样式表时未在 html 上调用背景图像
【发布时间】：2012-10-31 11:05:32
【问题描述】：

大家好，我有一个简短的问题。我正在使用 Visual Studio 2012 学习 HTML 和 CSS。我正在尝试拥有多个背景来尝试视差效果类型的东西。我知道 CSS 可以有多个背景，像这样：

    background: url("/file/image.png"), url("/file/images2,png"), etc.....

但我想做的是像这样使用 div id 选择器调用图像

    #image1 { background:url ("/file/image.png");}


    #image2 { background: url ("/file/image2.png");}

HTML

    <body>

    <div id="image1"></div>
    <div id="image2"></div>

每次我运行以下代码时，屏幕上都没有显示任何内容。我唯一得到的东西是如果我把代码放在 body{} 上。我错过了什么还是 VS 2012 设置不正确？

谢谢

【问题讨论】：

我认为您错过了“以下代码”
当使用外部样式表时，图像的路径是相对于 CSS 文件的，而不是链接到它的 HTML 页面。您确定路径正确，并且背景图片是否显示在页面资源中（使用浏览器的网络开发工具）？

标签： html css image background

【解决方案1】：

感谢大家的快速回复。所有关于宽度和高度的答案都适用于我的代码，并且图像能够正常显示。

谢谢。

【讨论】：

【解决方案2】：

在你的 CSS 样式中定义图像的高度和宽度

#image1 { background:url ("/file/image.png"); height: xxxpx; width: xxxpx;}
#image2 { background: url ("/file/image2.png"); height: xxxpx; width: xxxpx;}

【讨论】：

【解决方案3】：

实际上，您只需仔细检查图像的位置。

行内：

#image1 { background:url ("/file/image.png");}

在 CSS 中，url 是相对于这个样式表的位置的。在 Visual Studio 2012 中，如果您的 .css 文件位于一个文件夹中，而您的图像位于同一级别的另一个“文件”文件夹中，您可以将其写为：

#image1 { background:url ("../file/image.png");}

【讨论】：

【解决方案4】：

这不是 Visual Studio。如果您使用的背景图片不包含任何内容，那么您的 div 元素就没有内容可以调整大小。

您要么需要在 div 元素上设置固定尺寸，要么在其中放置足够的内容以使其大小合适。

【讨论】：

【解决方案5】：

div 标签默认是其中内容的高度。如果div 中没有内容，则高度为零。您可能需要手动将图像的高度添加到 div 标签：

div#image1 { height: 200px; /* Height of image.png */ }
div#image2 { height: 300px; /* Height of image2.png */ }

【讨论】：