使用@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 属性。

缩小页面大小时，图片不会发生变化。我 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');
    }
}