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)

Answer 2

首先，你的语法错了。其次，至少在你提供的代码中，你的div是零大小。看看它是如何工作的：

＆＃13;

.logo {
  display: block;
  width: 99%;
  height: 400px;
  border: solid 1px red;
  background-image: url('http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/10/mountains.jpg');
  background-size: 100%;
}

@media only screen and (max-width: 767px) {
  .logo {
    background-size: 50%;
    background-repeat: no-repeat;
  }
}

＆＃13;

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

＆＃13;

但是你想要响应式设计吗？你可能误解了background-size: 50%;属性的含义？

Answer 3

Uhm mate，这是一个简单的问题：给你的包装器一些高度。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: