为什么 background-image 属性会在 Chrome 中引起警告？

Question

我正在使用 jQuery 的 .css() 方法来设置 div 的背景图像。因此，处于最终状态的 HTML 是：

<div id="front-page-bg" style="background-image: url(http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg); display: block; "></div>

它工作正常，但是，我在 Chrome 中收到错误/警告，其中 background-image 属性被删除，好像由于输入错误而被忽略，即使它是显然被应用了。为什么会这样？是 Chrome 的问题，还是我的问题？

我已经在 FF 和 IE 中测试了该页面，它似乎也可以正常工作，没有任何错误或类似警告。关于为什么会发生这种情况的任何想法，也许更重要的是，我是否应该忽略它，因为该页面似乎正在运行？

Answer 1

@IsaacLubow; Chrome & Safari 开发者工具都显示 warning 错误。那么问题是

为什么会显示警告？

答案：- 当属性不是 understand & recognized 时，Chrome & Safari developer tool 都会显示警告。

例如：- 在css中写-moz-border-radius。然后检查 chrome 或 safari 中的页面。它显示了与您相同的错误。

那么第二个提出的问题是

但 background-image 属性被所有浏览器识别！

回答：- 是的； background-image 属性被所有浏览器识别并且图像仍然显示在网站上，但我们定义图像的方式是导致 warning/error 的原因。在您的示例中，如果您在 html tag 而不是 css 中定义 background-image 属性。它显示了warning/error。

查看此示例，第一个 div 图像显示warning，但第二个 div 未显示任何警告：

http://jsfiddle.net/sandeep/RDmRz/3/show

所以;为什么会这样？

因为在html标签中赋值属性是Deprecated方法的意思

那些已弃用的功能仍然可以使用，但应该与 谨慎，因为预计它们将在某个时间完全删除 未来。您应该努力从您的代码中删除它们的使用。

查看mozilla 对https://developer.mozilla.org/en/JavaScript/Reference/Deprecated_Features 的评价

https://developer.mozilla.org/en/DOM/HTMLImageElement

所以; Developer tool 已根据新的 html standards 进行更新，并且在引入 HTML4 之后，一些属性已弃用和过时。

查看更多http://fantasai.tripod.com/qref/HTML4/deprecated.html

http://www.createafreewebsite.net/html_tutorial/body_tag.html.

最好在css 中写background-image 而不是html 标签。

Answer 2

---

编辑：

通过更深入的检查（忽略图像的第一个误导性 404 问题），似乎开发人员工具忽略了样式定义；事实上它适用于 附加警告图标的not-parsed-ok 类，以及导致换行的overloaded 类。 如果使用background 代替background-image css 定义，则不会附加重载类。

但是要发现这种行为的原因，需要分析开发者工具的源代码。

我的猜测是这是开发人员工具的错误/不完整功能。

这是我自己的测试：

您可以看到使用的图像是本地的，并且有 apix。这是检查结果：

使用不存在的 css 属性进行测试，它显示了相同的行为：

---

您引用的图片有一些奇怪的网络服务器问题： 事实上它正在返回一个 404 错误（可能是超时？），然后是一个重定向。

所以你应该检查图像和网络服务器路径，而不是你的实际 html 代码。

即使尝试输入实际的 html 代码，错误也是一样的：

这是您的网络服务器的实际响应，而不是您的图像：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>

Answer 3

http://peterfcarlson.com/wp-content/uploads/2011/09/ert-011.jpg

您的图片没有出现，而是出现 404 错误。我注意到您使用的是来自您的图片 url 结构的 wordpress 网站，我们可能看到的不是您的图片，而是您的主题内的 404.php 页面中包含的图片。

返回的html如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;}
body{overflow:hidden;background:#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png) center center no-repeat}
</style>
</head>
<body>
</body>
</html>

这是正在加载的图像：http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png

我很确定，如果您从您的主题中检查您的 404.php 页面，您就会发现。所以你可能想重新上传图片并使用新的 url。

---

评论

我知道问题已得到解答，但我想就我发现的结果发表意见。我注意到，由于某种原因，当您为元素指定 background-image 时，它有时会在 webkit 浏览器中发出警告，这是 OP 遇到的问题。但我注意到，当使用 background 简写代替时，警告消失了。

像这样：

background:#ffffff url('image.png') repeat scroll right top;

我修改了@sandeep 的演示以展示它是如何工作的：

这是完整的小提琴：http://jsfiddle.net/RDmRz/7/

和演示页面：http://jsfiddle.net/RDmRz/7/show/

使用开发人员工具检查页面并在 div 之间切换，以显示它如何适用于“有效”图像，而不适用于其他图像。

几张截图：

作品

不起作用

Answer 4

问题在于 DevTools/WebInspector 错误。 DevTools UI 代码只是显示了 DevTools 后端部分并不总是正确生成的数据。

WebKit 错误：https://bugs.webkit.org/show_bug.cgi?id=70325

铬错误：http://code.google.com/p/chromium/issues/detail?id=100646