添加動態響應式背景圖像的最佳方法是什么？

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