使用 @media 属性更改图像的内容 URL

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 属性提供的。

在 缩小页面大小时，图像不会改变。我控制台中的 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');
    }
}