Css 为什么背景图像属性会在Chrome中引起警告？_Css_Google Chrome_Background Image_Google Chrome Devtools

Css 为什么背景图像属性会在Chrome中引起警告？

css google-chrome google-chrome-devtools

Css 为什么背景图像属性会在Chrome中引起警告？,css,google-chrome,background-image,google-chrome-devtools,Css,Google Chrome,Background Image,Google Chrome Devtools,我正在使用jQuery的.css（）方法设置div的背景图像。因此，处于最终状态的HTML为：它工作正常，但是，我在Chrome中收到了一个错误/警告，背景图像属性被穿透，就好像由于输入错误而被忽略了一样，尽管它显然被应用了。为什么会这样？这是Chrome的问题还是我的问题我已经在FF和IE中测试了这个页面，它似乎也可以正常工作，没有任何错误或类似的警告。关于为什么会发生这种情况，也许更重要的是，我是否应该忽略它，因为页面似乎正在工作？@IsaacLubow；Chrome和Safarid

我正在使用jQuery的

.css（）

方法设置

div

的背景图像。因此，处于最终状态的HTML为：

它工作正常，但是，我在Chrome中收到了一个错误/警告，

背景图像

属性被穿透，就好像由于输入错误而被忽略了一样，尽管它显然被应用了。为什么会这样？这是Chrome的问题还是我的问题

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

@IsaacLubow；

Chrome和Safari

developer工具都显示

warning

错误。那么问题是

为什么他们会发出警告？回答：-Chrome和Safari开发者工具都会在属性未被他们理解和识别时显示警告

例如：-在css中写入

-moz边框半径

。然后在chrome或safari中查看页面。它显示了与您相同的错误

第二个问题是

但所有浏览器都能识别背景图像属性！ 回答：-是<代码>背景图像属性被所有浏览器识别&图像仍然显示在网站中，但我们定义图像的方式是导致该

警告

错误的原因。在您的示例中，如果在html标记中定义background image
属性，而不是css
。它显示了警告
/错误

检查此示例：第一个div图像显示警告
，但第二个div未显示任何警告：
所以为什么会这样？
因为在html
标记中分配属性是一种不推荐的方法
这些不推荐使用的功能仍然可以使用，但应与一起使用
注意，因为预计它们将在未来某个时间完全移除
未来。您应该努力从代码中删除它们的使用
检查一下mozilla对这件事的看法

所以,<代码>开发工具
在引入HTML4
某些属性后，将根据新的html标准
进行更新
查看此项了解更多信息

在css
中编写background image
而不是html
标签是很好的选择。

编辑：
通过更深入的检查（忽略图像的第一个误导性404问题），开发工具似乎忽略了样式定义；事实上，它适用于
未解析正常
类，该类附加警告图标，以及导致行通过的重载类。
如果使用background
代替background image
css定义，则不会追加重载类
但是要发现这种行为的原因，就必须分析开发人员工具的源代码
我的猜测是，这是一个开发人员工具错误/不完整的特性
这是我自己的测试：

正如您所看到的，使用的图像是本地的，并且具有apix。这就是结果检查：

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


您引用的图像存在一些奇怪的web服务器问题：
实际上，它返回一个404错误（可能是超时？），然后是一个重定向
因此，您应该检查图像和web服务器路径，而不是实际的html代码

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

这是web服务器的实际响应，而不是图像：
<!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>


html，正文{高度：100%；宽度：100%；边距：0；填充：0；}
正文{溢出：隐藏；背景：#EDEDED url(http://peterfcarlson.com/wp-content/themes/comingsoon/pfc.png)中心不重复}

你的图像没有出现，相反，我们得到一个404错误。我注意到，您使用的是wordpress站点，从图像url的结构来看，我们可能看到的不是您的图像，而是包含在主题内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>

我修改了@sandeep的演示以展示其工作原理：
下面是全部内容：
和演示页面：
使用开发人员工具检查页面，并在div之间切换，以显示它如何适用于“works”图像，而不适用于其他图像
几个屏幕截图：
有效

不起作用
问题在于DevTools/WebInspector错误。
DevTools UI代码只是显示DevTools后端部分并不总是正确生成的数据
WebKit错误：
Chrome bug:
Chrome是否向您提供了有关警告的信息？控制台中没有出现类似的“警告”，没有。请尝试用引号或省略号将图像的地址括起来，如：url（'）。是否有其他脚本或样式表中应用的背景属性？这可能表明存在冲突，而不是错误的输入。@firian-虽然每个人都应该用引号括起URL（这是正确的做法），但Chrome仍然显示没有引号的代码。您的答案与主题有关。他试图设置元素的背景，而不是身体的背景。@MerianosNikos；但原因与在html标记中提供背景图像相同。现在检查我的更新答案不推荐的HTML属性（它甚至不存在于HTML
，它只存在于body）与CSS有什么关系？我认为Sandip是对的，请检查他附带的JSFIDLE。我检查了一下，他似乎是对的；你的回答只是假设
<!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>

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