不显示背景图像

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

来源

2012-01-03 uohzxela

您的代码按原样运行。确保图像在你期望的位置。检查它是否可访问并且权限不是问题。见：http://jsfiddle.net/UWFcL/ – xbonez 2012-01-03 04:23:17

嘿，你是什么意思的权限？我将图像放在与html文件相同的文件夹中，但我无法使其工作。 – uohzxela 2012-01-04 02:13:14

如果它在与html文件相同的文件夹中，权限不应该是一个问题。尝试使用Ramon提到的引号 – xbonez 2012-01-04 03:18:31

URL必须是一个字符串：

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

来源

2012-01-03 04:21:28

不需要字符串也可以：http://jsfiddle.net/UWFcL/ – xbonez 2012-01-03 04:22:33

您的网址没有“空格”，因此它的工作原理不是字符串。他的网址在这里有一个空格：\ My Documents \因此它必须是一个字符串。 – 2012-01-03 04:38:11

啊，是的。你是对的。 – xbonez 2012-01-03 05:13:52

我想这是一个权限问题，不管你最当你将这个URL移动到服务器时，可能有URL是文件引用的问题，我建议将你的图像移动到服务器同一位置（或更好，但在您的网站的根目录的图像文件夹）作为你的HTML文件，然后修改你的CSS是这个

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

来源

2012-01-03 04:24:23 Robert

我将它添加到'images'文件夹中，然后将它放在与html和css文件相同的文件夹中。但无法使用url（'alert.png'）/ url（'/ images/alert.png'） – uohzxela 2012-01-04 02:23:29

我认为你有权限问题。你是否在本地Web服务器或托管环境中运行此操作？ – Robert 2012-01-04 02:35:05

我没有运行任何我知道的服务器。我只是创建HTML和CSS文件，并使用Firefox运行HTML文件。 – uohzxela 2012-01-04 02:51:54

做事情的另一种方法是把你的文字变成股利，并如用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放在您的css下的.alert类中。

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

来源

2012-01-03 05:05:23

我跟着你的代码与格式。但仍然没有成功。 – uohzxela 2012-01-04 02:30:24

该代码似乎对我来说工作正常 - 你的映像地址是否正确？如果您的网站位于名为“Foo”的文件夹中，并且您尝试引用该文件夹中的图像，则始终可以使用格式。 “../”表示“从站点的根文件夹开始，然后导航到文件”而不是“导航到文件”。 – 2012-01-04 02:38:15

请检查您的URL，如果可能的话，您可以使用firebug这是Firefox的插件，它一定会帮助您，通过指示图像是否已加载。

否则如下

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

来源

2012-01-03 05:11:09

我试过给10px的高度，但没有成功。 – uohzxela 2012-01-04 02:27:04

它适用于我..我的意思是你检查图像路径是否正确或不正确。你有没有试过萤火虫来检查图像是否已经加载或没有。 – 2012-01-04 05:00:51

首先把你的alert.png画面在同一文件夹作为HTML文件中的另一个解决办法是给予高度快讯类。

然后在你的CSS文件试试这个：

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

我认为这个问题是 “\” 的\ alert.png

祝你好运！

来源

2014-07-27 14:18:59 user3073117

在他在CSS

背景图片有原题：URL（C：\ Documents和Settings \ USER \我的文档\ alert.png）;

我遇到了一个画廊页面，有图像作为背景缩略图的问题。任何有空格的图像文件名都不会出现。只是这样一个事实是，一幅图像碰巧代替了空格，并且确实显示出我能够追踪它。由于他的网址中有空格，这可能是问题所在。我通过使用\来修复我的问题，以避免导致问题的空间字符。即

A \空间\ IN \中\ filename.jpg

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

来源

2015-08-09 16:19:51 M61Vulcan

不显示背景图像

回答

相关问题