Question

我是HTML和CSS的新手。请帮我解释一下代码。虽然我正确输入了语法，但我无法将背景图像显示在浏览器中。我得到的只是一个橙色的盒子，没有alert.png图像。我正在关注一个在线教程btw：http://dev.opera.com/articles/view/31-css-background-images/#thecode

编辑1：图像，html文件和css文件都在同一个文件夹中。但没有成功。

编辑2：我使用了一个独特的css文件名而不是一个通用的“style.css”（我的系统中有几个这样的），它有效！确保url和括号之间没有空格。

HTMl代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta http-equiv="Content-Type" content="text/html; 
        charset=utf-8">
        <title>alert message</title>
    </head>

    <body>
<p class="alert">
  <strong>Alert!</strong> 
    This is an alert message.
</p>
    </body>
</html>

CSS代码：

.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}

Answer 1

网址必须是字符串：

url("C:\Documents and Settings\USER\My Documents\alert.png");

Answer 2

我猜这是一个权限问题，无论你将这个URL移动到服务器时，你很可能会遇到文件引用问题，我建议你把图像移到同一个位置（或者更好的是图像文件夹）在您的网站的根目录中）作为您的html文件然后修改您的CSS为此

.alert {
  width: 20em;
  background-image: url('/alert.png'); /* '/images/alert.png' */
  background-color:orange;
  margin: auto;
  padding: 2em;
}

Answer 3

另一种做法是将文本放入div中，然后使用css将图像设置为div的背景图像，如下所示：

<div class="alert">
   <p>
     <strong>Alert!</strong>
     This is an alert message.
   </p>
</div>

而且，对于CSS：

.alert {
     width: 20em; (Width of entire div, which includes text and bg image)
     background-image: url('../alert.png');
     background-color: orange;
     margin: auto;
     padding: 2em;
}

您可以在此处查看实时JSFiddle示例：http://jsfiddle.net/Cwca22/TdDJY/

此外，在上面的代码中，背景图像将水平和垂直平铺（重复）以填充div的空间。为了防止这种情况，您可以将div设置为与背景图像相同的高度和宽度，或者将background-repeat: no-repeat放在.alert类下的css中。

希望这会有所帮助并祝你好运！

Answer 4

请检查您的网址，如果可能，您可以使用firefox作为firefox的插件，这肯定会帮助您，通过指示图片是否已加载。

否则，另一个解决方案是为您的警报类提供高度，如下所示

.alert {
  width: 20em;
  background-image: url('/alert.png'); /* '/images/alert.png' */
  background-color:orange;
  margin: auto;
  padding: 2em;
  height: /* height of image*/
}

Answer 5

首先将alert.png图片放在与html文件相同的文件夹中。

然后在CSS文件中尝试：

body {
     background: orange url("alert.png") no-repeat;
}

我认为问题是\ alert.png

中的“\” 祝你好运！

Answer 6

他在他的CSS中提出的原始问题

background-image：url（C：\ Documents and Settings \ USER \ My Documents \ alert.png）;

我遇到了包含图片作为背景缩略图的图库页面的问题。任何具有空格的图像文件名都不会出现。只有这样一个事实，即一张图像恰好有了下划线代替空格，而且看起来我能够追踪它。由于他的网址中有空格，这可能是问题所在。我通过使用\来解决我的问题，以逃避导致问题的空格之类的任何字符。即

\ \ \ \ \ \文件\ _ <。
中的空格\

虽然这可能不适用于Windows路径名！如果图像与脚本位于同一目录中，则无论如何都不需要完整的URL。

背景图像没有出现

6 个答案: