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工作组已经意识到这些问题，例如转换背景图像正在进行中，所以我预计这将在未来发生变化！

但是，background-color是一个可动画的属性，因此可以使用：

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/changing-a-background-image-with-css3-transitions/的好文章，但我建议使用javascript作为css，这里有兼容性问题，这是用JS http://fx.inetcat.com/

做这个的好链接

基于媒体查询的CSS过渡

3 个答案: