Question

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

选项A：

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

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

选项B：

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

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

选项C：

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

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

Answer 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覆盖不匹配查询的背景图片网址。

请参阅此小提琴，了解简短演示：http://jsbin.com/wemunupumu/

Answer 2

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

<强>优点：

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

<强>缺点：

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

Answer 3

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

以下是article，其中包含更多详细信息。

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

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

4 个答案: