CSS3 で背景画像を適切に切り替えるにはどうすればよいですか?

CSS3 背景画像のトランジションをマスターする

目を引く「フェードイン フェードアウト」効果を作成しようとして、予期せぬ課題に遭遇しました。 CSS トランジション プロパティを背景画像に適用します。以下の包括的なソリューションを詳しく見てみましょう:

コードで提供される CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

上記のコードは賞賛に値する試みを示していますが、次のコード間の微妙だが重要な違いを説明できません。背景プロパティと背景画像プロパティ。背景画像をアニメーション化するには、単に「背景」ではなく「背景画像」にトランジションを適用する必要があります。

更新されたコードは次のとおりです:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

この調整により、スムーズなアニメーションが可能になります。背景画像に求められるトランジション。 CSS トランジションで背景画像を操作する場合は、トランジション プロパティのターゲットとして常に「background-image」を指定してください。

以上がCSS3 で背景画像を適切に切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。