基于媒体查询的 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 )。