html - 背景图像未出现

标签 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;
}

最佳答案

url 必须是字符串:

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

关于html - 背景图像未出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8707874/

相关文章:

html - 没有分数偏移的水平居中元素?

jquery - 让背景图片滚动到我的其他 <div> 列后面

css - 背景图像路径在 Firefox 中不起作用

Javascript 将 switch 的大小写绑定(bind)到 html 按钮

html - 为什么 flex-box 适用于 div,而不适用于表格?

javascript - Bootstrap 下拉按钮宽度问题

jquery - 如何使用 jQuery 在 div 中附加图像?

html - 获取悬停在其上的 div 的 InnerHTML

javascript - HTML5/JS 中的图像颜色叠加

css - .css 文件中的 Thymeleaf URL 表达式