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

Question

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

选项A：

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

专业版：浏览器的预备者可以获取它。
Contra：它直接添加样式并硬编码到不理想的标记。 我也不知道如何在没有将超复杂的媒体查询添加到style属性的情况下实现响应式图像解决方案。

选项B：

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

Pro：响应式图像是可以实现的。 内联样式仅通过脚本写入标记。
Contra：JavaScript失败时失败。 预备者无法及早获取它。 因此，在显示图像之前增加闪光的机会。

选项C：

使用内容响应图像。 亲：容易做到。 Contra：这不是我想做的，也不是语义上正确的，因为图像显然只是代表性的，应该存在于CSS中，而不是HTML中。

---

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

Answer 1

我不喜欢在Javascript中听媒体查询，只要它可以用css处理。

如果隐藏了display:none; ，则不会加载AFAIK css背景图像display:none; 。 这就是我通常为不同的媒体查询添加一个容器，其中包含具有不同背景图像的多个元素。 选择要显示的那个可以完全在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以外的任何content 。 这将是一个很大的帮助:(

更新：

display: none; 当然，这还不够。 您必须使用background-image: none !important覆盖不匹配查询的背景图像网址。

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

Answer 2

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

优点：

• 易于实施
• 未来证明（适应新的用户代理）
• 减少您身边的流量

缺点：

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

Answer 3

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

这是有更多细节的文章 。

Answer 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;
    }
}