使用@media屬性更改圖片的內容網址

Question

我正在嘗試開發響應網頁。我應該在桌面視圖和移動視圖中顯示兩個不同的圖像。我嘗試使用CSS的@media屬性更改圖像，像這樣。

#login-top-shadow{ 
     max-width: 100%; 
     @media only all and (max-width: 700px) { 
     content:url("img/login_top_shadow_mobile.png"); 
    } 
} 

這是應該在桌面視圖中所示的圖像，給出了我的圖像的SRC屬性。

雖然縮小頁面大小，圖像不會改變。 I t在控制檯中的CSS屬性發生更改，但不在html中。

這是正確的方法來放置圖像，而放置圖像響應網頁設計？ 附加我的控制檯的屏幕截圖。

Answer 1

我建議你創建一個div，然後將其設置爲background-image。

https://jsfiddle.net/6hj41pft/

<div></div> 

    div { 
    background-image: url('http://images.clipartpanda.com/clipart-sun-decorative_sun_clip_art_23259.jpg'); 
    height: 400px; 
    width: 400px; 
    background-size: cover; 
} 

@media screen and (min-width: 480px) { 
    div { 
     background-image: url('https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1'); 
    } 
}