2

background-imageページが狭くなるにつれてフェードアウトを使用して設定される背景画像を作成しようとしています。CSSトランジションを使用して実行できると確信していますが、私はそれらにかなり慣れていません。私が求めているのは、メディアクエリに基づいて背景画像をトランジションアウトすることはできますか?

4

3 に答える 3

3

はい、できます。私はいくつかのライブの例を作りました:

@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;
}

@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の例)。

于 2012-06-22T02:42:03.213 に答える
2

Oli Studholmeによると、 background-image はアニメーション可能なプロパティではありません:

CSS Working Group はこれらの問題を認識しており、たとえば background-image の遷移などに取り組んでいるので、これは将来変更されると思います!

ただし、 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;
    }
}

サポートするブラウザに応じて、それぞれのプロパティを使用してください。

于 2012-06-22T02:00:37.987 に答える
1

はい、このhttp://blog.w3conversions.com/2011/03/ching-a-background-image-with-css3-transitions/に関する良い記事はここにありますが、css には互換性があるため、javascript を使用することをお勧めします。ここの問題は、JS http://fx.inetcat.com/でこれを行うための良いリンクです

于 2012-06-22T01:43:54.810 に答える