更改背景图片的尺寸与媒体查询

.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;} 
}

任何帮助，不胜感激

来源

2015-02-10 Craiginwlaes

可以添加问题的再现（的jsfiddle /代码片段）和/或提供的“为什么它不工作”更多的细节？ – Tanner 2015-02-10 15:31:07

它应该工作。 – panther 2015-02-10 15:34:50

@panther @ slime在下面有正确的答案:) – somethinghere 2015-02-10 15:36:18

尝试......

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

来源

2015-02-10 15:34:19 Slime

更好（因为这是一个非常普遍的问题）：'@media all'，但是，好的。 – somethinghere 2015-02-10 15:35:17

仍然无法使用 - 已清除缓存。检查图像的网址等。 – Craiginwlaes 2015-02-10 15:42:23

它应该已经工作了，但如果没有......那么我怀疑是与标识所在的容器有关。另外，也许尝试'50％50％'。 – Slime 2015-02-10 15:45:07

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

.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; 
 
    } 
 
}

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

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

来源

2015-02-10 15:45:24

Uhm队友，继承人一个简单的：给你的包装一些高度。

.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; 
 

 
    } 
 
}

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

来源

2015-02-10 15:45:43 somethinghere

Doh！没有声明DIV的宽度。谢谢大家。 – Craiginwlaes 2015-02-10 15:59:19

更改背景图片的尺寸与媒体查询

回答

相关问题