gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 10:56:36 25 4
gpt4 key购买 nike

我正在使用 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 中测试了该页面,它似乎也可以在没有任何错误或类似警告的情况下工作。关于为什么会发生这种情况的任何想法,也许更重要的是,我是否应该忽略它,因为该页面似乎正在运行?

最佳答案


编辑:

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

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

我的猜测是,这是一个开发者工具错误/不完整的功能。

这是我自己的测试:

enter image description here

如您所见,使用的图片是本地的,并且有 apix。这是由此产生的检查:

enter image description here

使用不存在的 css 属性进行测试,它显示相同的行为:

enter image description here


您引用的图片有一些奇怪的网络服务器问题:事实上,它返回一个 404 错误(可能是超时?),然后是一个重定向。

所以你应该检查图像和网络服务器路径,而不是你的实际 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>

关于css - 为什么 background-image 属性会在 Chrome 中引起警告?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7664668/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com