将(响应)背景图像添加到静态网站的最佳方法是什么？另一个要求(由'dynamic'描述)是图像由后端设置,因此不能直接写入CSS文件.
选项A:
通过style属性在模板中注入背景图像.
专业版:浏览器的预备者可以获取它.
Contra:它直接添加样式并硬编码到不理想的标记.我也不知道如何在没有将超复杂的媒体查询添加到style属性的情况下实现响应式图像解决方案.
选项B:
将模板中的响应式背景图像源作为数据属性注入,并style通过JavaScript 将最佳假设写为属性.
Pro:响应式图像是可以实现的.内联样式仅通过脚本写入标记.
Contra:JavaScript失败时失败.预备者无法及早获取它.因此,在显示图像之前增加闪光的机会.
选项C:
使用内容响应图像. 亲:容易做到. Contra:这不是我想做的,也不是语义上正确的,因为图像显然只是代表性的,应该存在于CSS中,而不是HTML中.
你有更好的想法或知道什么是最好的选择吗？感谢您提供任何额外的见解或想法!