如何在 CSS3 中為背景圖片建立淡入/淡出過渡？

CSS3 中的圖像淡入淡出效果過渡

元素可以使用 CSS 過渡實現「淡入淡出」效果，但是背景圖像呢？

一位讀者最近在使用以下內容的背景下努力實現這一目標CSS：

.title a {
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

問題是背景屬性無法為文字等元素設定動畫。

解決方案在於單獨轉換背景影像屬性，如本更新所示CSS：

.title a {
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

這允許影像淡入淡出過渡。請注意，目前 Chrome、Opera 和 Safari 原生支援此轉換。 Firefox 和 Internet Explorer 可能不會。

以上是如何在 CSS3 中為背景圖片建立淡入/淡出過渡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！