基於媒體查詢的CSS過渡

Question

我試圖使頁面變窄時使用background-image設置的背景圖像淡出。我很確定它可以使用CSS轉換來完成，但我對它們很不熟悉。我想我問的是，你可以基於媒體查詢做出背景圖像轉換嗎？

Answer 1

是U可以在這裏對這個http://blog.w3conversions.com/2011/03/changing-a-background-image-with-css3-transitions/的好文章，但我會建議使用JavaScript作爲CSS會有兼容性問題在這裏是一個很好的鏈接，與JS http://fx.inetcat.com/

Answer 2

據Oli Studholme，背景圖像這樣是不是一個動畫的屬性：

CSS工作組是知道這些問題，例如過渡背景圖像正在工作，所以我希望這將改變在未來！

但是，背景色爲動畫屬性，因此這個工程：

body { 
    background-color: #666; 
    height: 100%; 
    -moz-transition: background-color 1s ease; 
} 
@media screen and (max-width: 800px) { 
    body { 
     background-color: #ccc; 
     -moz-transition: background-color 1s ease; 
    } 
} 
@media screen and (max-width: 400px) { 
    body { 
     background-color: #fff; 
     -moz-transition: background-color 1s ease; 
    } 
} 

當然，沒有梯度。這不使用CSS轉換，但也有點八九不離十模擬了同一件事：

body { 
    background-image: -moz-linear-gradient(top, #369, #000); 
    height: 100%; 
} 
@media screen and (max-width: 800px) { 
    body { 
     background-image: -moz-linear-gradient(top, #036, #000); 
    } 
} 
@media screen and (max-width: 400px) { 
    body { 
     background: #000; 
    } 
} 

只需使用取決於你想要支持的瀏覽器的各自的屬性。

Answer 3

是的，你可以。我做了幾個活生生的實例：

• 顏色，來測試這個概念：http://jsfiddle.net/nc6zT/1/

@media screen and (max-width: 400px) { 
    div { background: navy; } 
} 

@media screen and (min-width: 400px) { 
    div { background: green; } 
} 
div { 
    transition: background 2s linear; 
    width: 400px; text-align: center; color: white; 
} 

• 不透明度和圖像：http://jsfiddle.net/nc6zT/2/

@media screen and (max-width: 400px) { 
    div { opacity: 0; } 
} 
@media screen and (min-width: 400px) { 
    div { opacity: 1; } 
} 
div { 
    background: url(http://placekitten.com/400/300/); 
    transition: opacity 1s linear; 
    width: 400px; height: 300px; text-align: center; color: white; 
} 

我被騙了一點，因爲淡出背景圖片並不廣泛不支持，但請嘗試使用交叉淡入淡出（）語法（例如http://peter.sh/files/examples/cross-fading.html）。