css - 使用媒体查询更改背景图像大小

Question

.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
    background-size: 100%;
}

@media(max-width:767px) {
.logo {
    background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
  background-size: 50%;
  background-repeat: no-repeat;

}
    }

<div class="logo"> </div>

我无法弄清楚为什么这不起作用 - 图像无法呈现的任何想法？

HTML:

<div class="logo"> </div>

CSS:

.logo {
background-image: url(../img/logo_white.png);
background-size: 100%;}

@media(max-width:767px) {
.logo {
background-image: url(../img/logo_white.png);
background-size: 50%;
background-repeat: no-repeat;}
}

非常感谢任何帮助

Answer 1

试试这个...

@media screen and (max-width:767px)