css - 基于媒体查询的 CSS 过渡

Question

我正在尝试制作一个使用background-image淡出设置的背景图像，因为页面变窄了。我很确定它可以使用 CSS 过渡来完成，但我对它们相当不熟悉。我想我要问的是，你能根据媒体查询制作背景图像过渡吗？

Answer 1

是的你可以。我做了几个活生生的例子：

• 用颜色来测试这个概念：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;
}

我作弊了一点，因为淡出背景图像不受广泛支持，但请尝试建议的 cross-fade() 语法（例如http://peter.sh/files/examples/cross-fading.html）。

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://blog.w3conversions.com/2011/03/changeing-a-background-image-with-css3-transitions/的好文章，但我建议使用 javascript，因为 css 将具有兼容性这里的问题是使用 JS 执行此操作的一个很好的链接http://fx.inetcat.com/