更改背景圖片的尺寸與媒體查詢

.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

更改背景圖片的尺寸與媒體查詢

回答

相關問題