2015-05-20 28 views
0

從服務器不同的斷點了我有它返回的內容以及標誌的內容如下使用CSS來改變圖像路徑中使用媒體查詢

[ 
{ 
"header":"Your Reviews", 
"content":"reviews details", 
"logo":"reviews.png" 
}, 
{ 
"header":"Your benefits", 
"content":"benefits details", 
"logo":"benefits.png" 
} 
] 

對於每一個數據一個後端REST API服務,存在將該藝術路徑例如「/assets/<breakpoint>/<replace_logo_name>」例如「/assets/desktop/reviews.png」或「/assets/tablet/reviews.png」或「/assets/mobile/reviews.png」的邏輯。即不同標誌圖像的不同斷點。我正在使用@media查詢,我可以使用標記或CSS背景屬性在屏幕上呈現徽標圖像。

但是,我不想使用JavaScript來更改不同設備或瀏覽器調整大小的徽標路徑。我正在使用JavaScript來只讀json並構建標記。我可以使用純CSS(使用媒體查詢或其他內容)根據斷點更改徽標路徑嗎?

請指教。

+1

不可以。儘管CSS可以改變您在頁面中顯示內容的外觀,但它無法更改從服務器收到的內容。它*可以使用@media查詢來訪問元素的不同背景圖像,或爲生成的內容/僞元素(':: before',':: after'等)提供不同的'content';但這可能或可能不適用於你的情況。 –

+0

謝謝,這是我的想法。我仍然不採取JavaScript路線,而是我計劃使用媒體查詢和標記生成邏輯爲所有這些類別創建單獨的CSS類,我將通過剝離「.png」來設置這些類名稱, – joy

回答

0

如果您將圖像設置爲background-image作爲div,則可以切換通過媒體查詢顯示的圖像。