logo标签列表

无法在CSS中设置背景图片

htmlcssbackground
3

我正在尝试使用以下CSS代码设置页面的背景图像，但没有图像显示。该图像将在页面上平铺，并且只有10x10像素大小。然而，它仍然无法显示。请问我做错了什么？

<body>
    <div id="background"></div>
</body>


#background {
background-image: url("img/background.png");
}
8个回答
10

图片是否在linkToCssFolder/img/background.png中？图片路径是相对于您的CSS文件而言的。

另外，您的#background div中是否有内容？如果没有，则它可能具有默认的高度0px，并且不显示任何背景。

2
如果你的CSS文件在自己的文件夹中，你应该尝试将其更改为background-image: url("../img/background.png");。 - Nightfirecat
4
如果你的CSS文件不在根目录下（/mystylesheet.css），那么你需要相应地更改路径。例如：/styles/mystylesheet.css 将使用 url(../img/background.png)。 - Jon Adams
1
你是否已经正确地将CSS链接到HTML文件？ - B.Gen.Jack.O.Neill
1
对于您的文件结构，应该是：<link rel=stylesheet href="css/style.css" type="text/css" /> - B.Gen.Jack.O.Neill
1
只需使用 body{background-image: url("../img/background.png");} 代替即可吗？ - Nightfirecat
显示剩余7条评论
2

你需要同时给元素指定尺寸...

#background {
   width: 10px;
   height: 10px;
}

背景图片不会使其容器拉伸以适应大小。
1
1

即使是专业人士，由于缺乏适当的关注和疲劳而经常忘记 CSS 和 HTML 的这种易如反掌的事情。如果你知道它，就休息一会儿。

如果你在网页设计的树中迷失了方向，以下是一些提示：

  1. 检查文件是否存在，文件类型以及浏览器对文件的支持
  2. 检查目录，如果您在线上，可以将所有文件的 URL 放在一起，或者使用 "../" 如果您的 CSS 和图像文件位于不同级别的目录中。
  3. 检查您的语法。
  4. 休息一下，小睡一会儿或喝杯咖啡。
0
首先检查你的CSS和图片位置 1）如果两者都在同一个文件夹中，尝试使用简单的 " background-image: url("background.jpg") "。 2）如果你有一个名为img的文件夹，并且里面有图片，则尝试 " background-image: url("img/background.jpg"); "。 3）如果你既有一个名为img的文件夹又有一个名为CSS的文件夹，那么你需要退回一步，然后进入image文件夹并选择图片，代码看起来像这样 " background-image: url("../img/background.jpg"); "，其中'..'代表后退一步。
这些是有用的线索，关于如何从样式表中的相对路径引用图像。然而，该问题已经有一个被接受的答案，提供了一个解决真正问题（而不是路径）的解决方案。 - Cody MacPixelface
0

另一个错误来源可能来自于图像扩展名，例如： background-image: url("img/background.png")

  • 图像名称必须是“background”，而不是“background.png”
  • 图像“background”必须是PNG格式，而不是其他图像类型，如JPG
0
#background {background-image: url("img/background.png"); height:300px;}

在 CSS 中添加 height 元素

-1

你好，

要获取你的图片，你必须想象自己在终端（或cmd提示符）中，并像你通常所做的那样编写代码以获取该图像。

假设您的CSS文件为/css/，您的图像位于/img/background.png，那么要获取该图像，您必须编写以下代码： background-image: url("../img/background.png");

这是因为在终端/cmd提示符中，要从.css文件中获取图像，您首先需要键入cd..，然后cd img，然后是background.png。希望这可以帮助到你！

祝一切顺利！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接