chrome浏览器不显示背景图片答案

【问题标题】：Background image not displaying in chrome browserchrome浏览器不显示背景图片
【发布时间】：2013-03-11 03:24:24
【问题描述】：

我创建了一个小型搜索小部件，但是通过 chrome 查看它时没有出现背景。我已经测试了 IE、FF 和 safari，它们看起来都不错。

http://paradigmsearch.co.uk/widget/?id=1

我通常不愿意将布局问题放在 SO 上。但是，我已经讨论了一段时间。

在元素上：

<div class="widget" id="id_300x250">

我正在应用以下 CSS 定义

.widget {
  font-family: arial;
  height: 250px;
  width: 300px;
  border: none;
  background: url('/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}

背景只是不可见。如果这是一个非常愚蠢的标记/css 疏忽，那么我深表歉意。

目前使用chrome浏览器版本25.0.1364.172m

【问题讨论】：

我看没问题，同版本的Chrome，windows机器。
我可以看到背景很好。我也在 chrome 25.0.1364.172 m 中。据我所知，您的代码很好。

标签： css html google-chrome

【解决方案1】：

这是一个非常有趣的问题，我是在 Chrome 的隐身模式下打开您的页面时才发现的：您的背景图片被 AdBlock 阻止了。

此外，为了呈现目的，最好将 style 元素粘贴到页面的 head 中。

【讨论】：

啊开枪！是的，我有广告屏蔽，但不会持续太久。谢谢。
我会更关心为什么它被检测为广告。否则，您网站上的图像可以正常加载，因此您可能希望将其移动到不同的文件夹中。 :-)
是的，这与所使用的 ID 名称有关。 300x250 是标准的广告单元尺寸，最好不要使用它。谢谢。
并且不要将其用作图像 URL 的一部分！
感谢上帝的回答，要弄清楚这个问题会非常困难。

【解决方案2】：

我已经使用 chrome 25.0.1364.172m 测试了您的代码，一切正常。

检查它：http://jsfiddle.net/rcHMc/

HTML

<div class="widget" id="id_300x250">

CSS

.widget {
  font-family: arial;
  height: 250px;
  width: 300px;
  border: none;
  background: url('http://paradigmsearch.co.uk/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}

【讨论】：