为什么这个css不会产生背景图像？

Question

body{    
background:#fff url('images/testProfile.jpg') no-repeat right top;
}

我认为这段代码应该有效，所以请提出有用的调试步骤......例如。如何以极端的方式调整图像属性和位置......

Answer 1

请记住，CSS中的url（）是相对于样式表而不是页面。这可能是一个问题。

Answer 2

很可能是因为没有找到图像。查看通过优秀浏览器的开发工具加载的图像（如Chrome，Safari或Firefox + firebug）。您应该能够看到它尝试加载的图像以及服务器响应。如果它是404，那么你的图像路径就错了。

请记住，图片网址始终相对于样式表位置，而不是页面本身。所以相对路径可能与你想象的不同。

---

调试示例

此页面：http://jsfiddle.net/qUfn9/

使用css：body { background: url('foo.png') }

让chrome dev工具说出来：

Answer 3

尝试使用url的绝对路径

body{    
background:#fff url('/images/testProfile.jpg') no-repeat right top;
}