背景图像未出现
总的来说，我对 HTML 和 CSS 很陌生。请帮我编写代码。尽管我正确输入了语法，但我无法让背景图像出现在浏览器中。我得到的只是一个橙色框，没有alert.png 图像。顺便说一句，我正在关注在线教程： 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;
}
I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode
Edit 1: The image, html file and css file are all inside the same folder. Yet no success.
Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.
HTMl code:
<!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 code:
.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
url 必须是字符串：
The url must be a string:
我猜这是一个权限问题，无论当您将其移动到服务器时，您很可能会遇到 URL 作为文件引用的问题，我建议将您的图像移动到同一位置（或者更好的是根目录中的图像文件夹）您网站的）作为您的 html 文件，然后将您的 css 修改为这样
I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this
另一种方法是将文本放入 div 中，并使用 css 将图像设置为 div 的背景图像，如下所示：
并且，对于 CSS：
您可以在此处查看实时 JSFiddle 示例： http://jsfiddle.net/Cwca22/TdDJY/
另外，在上面的代码中，背景图像将平铺（重复）水平和垂直方向以填充 div 的空间。为了防止这种情况，您可以使 div 与背景图像具有相同的高度和宽度，或者将
background-repeat: no-repeat放在 css 的.alert类。希望这有帮助，祝你好运！
Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:
And, for the CSS:
You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/
Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put
background-repeat: no-repeatin your css under the.alertclass.Hope this helps and good luck!
请检查你的URL，如果可能的话你可以使用firebug，它是firefox的插件，它肯定会对你有帮助，通过指示图像是否已加载。
否则，另一个解决方案将提高您的警报级别，如下所示
Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.
Else another solution would be give height to your alert class as follows
首先将alert.png图片放在与html文件相同的文件夹中。
然后在你的 CSS 文件中尝试这个：
我认为问题是 \alert.png 中的“\”
祝你好运！
First put your alert.png picture in the same folder as your html file.
Then try this in your CSS file:
I think the problem was the "\" in \alert.png
Good luck!
在他最初的问题中，他的CSS中有
我遇到了以图像作为背景缩略图的图库页面的问题。任何带有空格的图像文件名都不会出现。事实上，一张图像碰巧用下划线代替了空格，而我确实能够找到它。由于他的网址中有空格，这可能是问题所在。我通过使用 \ 转义任何导致问题的字符（例如空格）来解决我的问题。 IE
尽管这在 Windows 路径名中可能不起作用！
如果图像与脚本位于同一目录中，则无论如何他都不需要完整的 url。
In the original question he had in his css
I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.
though this might not work in a Windows pathname!
If the image is in the same directory as the script he shouldn't need the full url anyway.