通过css忽略图像答案

【问题标题】：Ignore image through css通过css忽略图像
【发布时间】：2014-08-10 11:39:20
【问题描述】：

我将以下代码与 javascript 一起使用来生成一个模糊的画布元素，我将其用作我网站周围的背景：

<div class="bg" data-src="demobilleder/njartists.jpg" id="bgc"></div>

这在台式机上运行没有问题，但确实让大多数平板电脑难以应付（它们使用相同的模板，RWD）

我可以通过 CSS 巧妙地禁用它吗？我知道我可以做一个显示：无，但仍在进行处理。由于我可能会使用媒体查询，所以我可以替换 ID 或其他任何使图像处理停止的东西？

我唯一的其他选择是做一些设备嗅探，但由于媒体查询适用于其他任何事情，我想知道一些 CSS3 规范是否可以为我解决这个问题:)

【问题讨论】：

没错！使用可以使用media-query 将image 设置为display: none;
@Alexdn：但这对我没有帮助。浏览器仍然尝试处理使浏览器停止的图像。我试图替换图像 url 但即使脚本仍然运行没有图像。我可以使用 Content: 插入新 ID 吗？这将正确地使该行无效，因为不允许使用 2 个 ID，从而导致脚本返回错误（因此不尝试执行任何过程）？
您能在css 中向我们展示您是如何做到这一点的吗？
@Alexdn：我的问题是我不知道它是否可能，但是新的各种 CSS3 选择器可以做很多事情，所以我在想这是否可能。我正在使用以下媒体查询来仅针对 Ipad：jsfiddle.net/rqmykk3a
谷歌查看断点，或者访问stackoverflow.com/questions/10031266/…

标签： css

【解决方案1】：

没有。

JavaScript 从 DOM 中选择项目，而不是从它的可见部分。因此，即使您尝试使用 CSS 和媒体查询来隐藏它，JavaScript 仍然会在后台运行和处理它。

解决方案是检查 window.innerWidth 并监听 window.onresize 事件。

【讨论】：

谢谢，我也知道。所以这就是为什么我不能使用 Display:none，我正在研究是否可以通过 CSS（内容:) 插入 ID。如果是这样，JS 无法正确获取 ID，因此将绕过它。我可以通过 CSS 插入新图像，但即使放入空图像，它仍然会尝试处理（空）图像。