背景图像没有出现

时间:2012-01-03 04:19:15

标签: html css background-image

我是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;
}

6 个答案:

答案 0 :(得分:2)

网址必须是字符串:

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

另一种做法是将文本放入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中。

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

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

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

然后在CSS文件中尝试:

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

我认为问题是\ alert.png

中的“\” 祝你好运!

答案 5 :(得分:0)

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

  

background-image:url(C:\ Documents and Settings \ USER \ My Documents \ alert.png);

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

  

\ \ \ \ \ \文件\ _ <。

中的空格\

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