logo标签列表

CSS：在CSS中设置背景图片

css
8
在CSS中设置背景图片的正确语法是什么？在Visual Studio中，背景看起来没有问题。但在像IE或FF这样的浏览器中，背景不会出现。我错过了什么吗？
我使用的语法如下（我认为是正确的...）
#headerArea
{
    height: 150px;
    background-image: url('/images/bgimage.jpg');
}

以上是正确的吗？
你能给我们一个文件结构的概念吗？在你的硬盘上，CSS相对于图像的位置在哪里？ - Tyson
CSS文件位于根目录下的“styles”文件夹中，而图像文件位于根目录下的“images”文件夹中。因此，它们基本上是分开的。 - jerbersoft
8个回答
8
根据您的文件夹结构和CSS文件相对于所使用的图像的位置，您需要进入图像目录的根级别并从那里访问它。您可以尝试以下内容：background-image: url('/../images/bgimage.jpg');。
抓住你了！但我使用了：background-image: url('../images/bgimage.jpg'); 没有第一个“/”。所以至少你给了我一个想法。谢谢！ - jerbersoft
7

我成功地使用了../images/bgimage.jpg。

怎么做？我没有使用引号 - 例如：

background-image: url(../images/bgimage.jpg);
对我有用，但必须从文件名中删除空格。 - Marc Sloth Eastman
6
如果您正在本地机器上测试而没有使用Web服务器（即如果FF中页面的URL以“file://”开头），则该URL将无法工作。您需要指定图像的相对路径，否则它将在硬盘根目录下查找该图像。因此，如果您的文件是这样的：
/some/path/html/index.html
/some/path/html/images/bgimage.jpg

你的代码将会是这样的：
background-image: url('images/bgimage.jpg');
这就是确切的设置。它是相对的。 - jerbersoft
请记住，CSS 中的图像路径是相对于 CSS 文件的位置而不是 HTML 文件的位置。因此，如果您的 CSS 文件位于子文件夹中，则可能需要使用 ../images/bgimage.jpg。 - Vegard Larsen
@jerbersoft：这不是你在问题中发布的代码。你使用了绝对路径url('/images/bgimage.jpg')。请注意前导斜杠。你在问题中犯了错误吗？ - Chuck
4

这是正确的语法。您是否检查过图片是否位于正确的位置？

我已经检查了，在Visual Studio中没有问题，因为背景图片正常显示。但问题出现在运行时，FireFox和IE中背景图片都无法正常显示。 - jerbersoft
由于我还没有足够的声望，所以我会在Philippe的答案下回复你的评论：是的，在Visual Studio中背景会消失。但是，当您在FF/IE中查看页面时，它是否显示？ - user57365
background-image: url('images/bgimage.jpg'); 移除第一个“/”也不起作用。 - jerbersoft
如果您正在使用外部的CSS样式表，请在HTML代码的<head>部分的<link>标签中验证其URL。 - Julian Aubourg
CSS文件的URL已验证正确，因为它可以在VS中使用。 - jerbersoft
3
请记住，相对路径是相对于 CSS 样式表的。
2
如果是相对路径，需要在URL路径中删除开头的“/”吗？
当我尝试在Visual Studio中删除“/”时，背景消失了，所以我认为“/”是必需的（还是不是？）。顺便说一下，我正在使用VS 2008 SP1。 - jerbersoft
1
我的CSS文件在“主题”文件夹中。 图像保存在“图像”文件夹中。 “主题”和“图像”都是项目根目录下的子文件夹。
在这种情况下，您应该使用。
background-image: url(../Images/imageName.jpg);
1
你确定在URL开头的斜杠吗？难道你不是想要访问“images”子目录中的图像...这意味着url('images/bgimage.jpg')吗？
是的，我正在访问位于"images"子目录中的图像文件。 - jerbersoft
然后通过删除第一个 / 更改 URL :) - Julian Aubourg
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接