添加动态响应背景图像的最佳方法是什么？答案

【问题标题】：What’s the best way to add dynamic responsive background images?添加动态响应背景图像的最佳方法是什么？
【发布时间】：2015-05-13 14:46:27
【问题描述】：

将（响应式）背景图片添加到静态网站的最佳方式是什么？另一个要求（用“动态”描述）是图像由后端设置，因此不能直接写入 CSS 文件。

选项 A：

通过style属性在模板中注入背景图片。

Pro：浏览器的预解析器可以获取它。
相反：它直接添加样式并硬编码到标记中，这并不理想。我也不知道如何在不将超复杂的媒体查询添加到样式属性中的情况下实现响应式图像解决方案。

选项 B：

在模板中注入响应式背景图像源作为数据属性，并通过 JavaScript 将最佳假设写入style 属性。

Pro：响应式图像是可以实现的。内联样式仅由脚本写入标记。
相反：当 JavaScript 失败时失败。 Preparser 无法提前获取它。因此增加了在图像显示之前闪烁的机会。

选项 C：

使用内容响应式图片。 专业人士：容易做到。 相反：这不是我想要做的，并且在语义上也不正确，因为图像显然只是代表性的，应该存在于 CSS 中，而不是 HTML。

您有更好的想法或知道什么是最佳选择吗？感谢您提供任何其他见解或想法！

【问题讨论】：

图片中的动态原样会变成不同的图片吗？
我认为第一个选项不需要超级复杂媒体查询。只需将 css 属性 img {max-width: 100%;} 添加到 body 或您想要背景的元素，您的图像就会响应。
你为什么不制作单独的类，每个类都有不同的背景图像，切换那个类。确保所有图像的大小相同并且对于任何分辨率都足够大，然后将图像宽度设为 100%
它将使您的图像适合容器元素的宽度，因此小图像会被拉伸。但这是另一个问题，与 CSS 无关，你不能让小图像在更大的尺寸下看起来很好
也许选项 C 带有 ARIA 属性，例如 role="presentation" 和 aria-hidden="true"？这样您就可以将它们从屏幕阅读器流程中删除。

标签： javascript css performance responsive-design

【解决方案1】：

我不喜欢用Javascript听媒体查询，只要能用css处理就行了。

如果使用display:none; 隐藏它们，则不会加载AFAIK css 背景图像。这就是为什么我通常会为不同的媒体查询添加一个包含多个具有不同背景图像的元素的容器。选择将要显示的那一项可以完全在 css 中处理。

<div class="images" role="presentation" aria-hidden="true">
   <span class="images__image images__image--phone" style="background-image: url(foo/bar/phone.jpg);"></span>
   <span class="images__image images__image--tablet" style="background-image: url(foo/bar/tablet.jpg);"></span>
   <span class="images__image images__image--desktop" style="background-image: url(foo/bar/desktop.jpg);"></span>
</div>

我还使用了我身边的组件，这些组件使用 javascript 更改了 img 元素的来源，但这不是背景图像的理想解决方案。

编辑：太糟糕了attr() 不能用于除content 之外的任何其他用途。在这里会很有帮助:(

更新：

display: none; 当然是不够的。对于不匹配的查询，您必须使用 background-image: none !important 覆盖背景图像 url。

查看这个小提琴的简短演示：http://jsbin.com/wemunupumu/

【讨论】：

实际上attr() 甚至不能在内容中使用，因为它包含一个很遗憾的 URL，因为这可以解决我的大部分问题。但这可能不会很快改变，因为它存在潜在的安全风险。
解决方案是可能的，但会添加空的仅代表标记，我通常会尽量避免。目前，预取器还会获取每个图像，因为它被设置为样式属性，并且不评估 CSS 文件媒体查询。因此并不理想。（来源：timkadlec.com/2012/04/media-query-asset-downloading-results）
我一个月前在当前的浏览器中测试了这个（当我构建这个时）并且图像在媒体查询匹配之前没有加载。至少在浏览器开发者工具中。不知道引擎盖下会发生什么。更改背景图像的 javascript 解决方案将是您的选择。你当然可以将 url 硬编码到 css 中，也可以嵌套在媒体查询中。
更新：忘记重要部分...对于不匹配的媒体查询，您必须用 none !important 覆盖背景图像。 display: none 当然是错的。很快就会添加一个小提琴
只需根据您的场景设置一个测试用例：Firefox 仅加载设置为 display: block 的资源，但 Chrome（Canary，听说 Chrome 现在在预取器中进行某种样式内联评估）实际上下载所有三个图像。在此处查看测试用例：jsbin.com/sunani/1

【解决方案2】：

我会使用经典的选项 A 并将其与响应式图像代理结合使用，例如 WURFL's Image Tailor（这是一项免费服务）或 Akamai's Front End Optimization。这将所有复杂性转移到他们身上。

优点：

易于实施
面向未来（适应新的用户代理）
减少您这边的流量

缺点：

您依赖外部服务
外部服务可能会在一天内收费
外部服务将禁止代理缓存

【讨论】：

【解决方案3】：

经过一些测试，我想出了一个解决方案，将<style> 元素添加到头部，并使用 min-width 和 max-width 媒体查询通过 CSS 插入背景图像。优点是不需要 JavaScript，不必使用内联样式，只加载合适的背景图片。

这里是article 的详细信息。

【讨论】：

【解决方案4】：

以下 Html CSS 将仅在移动视图中显示图像

HTML：

<div class='backImg' style='background-image:url({$imageLink}); background-size:100% 100%;'>   
         Some Text
</div>

CSS：

@media(min-width: 480px){ 
    .backImg{
        background-image:none !important;
    }
}

【讨论】：