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的问题，还是我的问题？

An error in the Chrome Developer Tools window

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

Answer 1

编辑：

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

但是要发现这种行为的原因，有必要分析开发人员工具的源代码。

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

这是我自己的测试：

enter image description here

你可以看到使用的图像是本地的，并且有apix。这是最终的检查：

enter image description here

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

enter image description here

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

因此，您应该检查图像和Web服务器路径，而不是实际的html代码。

Chrome screenshot

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

enter image description here

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

<!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 2

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

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

Chromium bug：http://code.google.com/p/chromium/issues/detail?id=100646

Answer 3

@IsaacLubow; Chrome & Safari个开发人员工具都显示warning错误。然后问题是

为什么他们会出现警告？

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

例如： - 在css中写background-image。然后检查chrome或safari中的页面。它显示了你所拥有的相同错误。

然后提出的第二个问题是

但是所有浏览器都能识别background-image属性！

答案： - 是的;所有浏览器都会识别warning属性。图片仍然显示在网站上，但我们定义图片的方式是error / background-image的原因。在您的示例中，如果您在html tag内定义css属性而不是warning。它会显示error / warning。

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

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

因此;为什么会这样？

因为在Deprecated标记中分配属性是mozilla方法意味着

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

查看关于https://developer.mozilla.org/en/JavaScript/Reference/Deprecated_Features

的Developer tool所说的内容

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

因此; html standards根据新HTML4＆amp;更新background-image在介绍css之后，某些属性已被弃用＆amp;过时的。

选中此项以获取更多http://fantasai.tripod.com/qref/HTML4/deprecated.html

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

最好在html而不是{{1}}标记中写{{1}}。

Answer 4

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

您的图片没有出现，而是我们收到404错误。我注意到你正在使用图片网址结构中的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页面就是你会找到的。因此，您可能需要重新上传图片并使用新网址。

<强>注释

我知道这个问题已得到解答，但我想知道我发现的结果。我注意到，出于某种原因，当您为元素指定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之间切换，以显示它如何为“工作”图像工作，而不是为其他人工作。

一些屏幕截图：

<强>作品

Works

不起作用

Doesn't Work

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

4 个答案:

为什么他们会出现警告？

但是所有浏览器都能识别background-image属性！

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

因此;为什么会这样？