为什么这个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工具说: