掌握CSS3 背景影像轉(zhuǎn)換

為了創(chuàng)建引人注目的「淡入淡出」效果，您在嘗試時偶然發(fā)現(xiàn)了一個意想不到的挑戰(zhàn)將CSS 過渡屬性應(yīng)用到背景圖像。讓我們深入研究下面的全面解決方案：

程式碼中提供的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;
}

上面的程式碼演示了值得稱讚的嘗試，但它未能解釋之間微妙但關(guān)鍵的區(qū)別背景屬性和背景圖像屬性。要為背景圖像設(shè)定動畫，您必須將過渡套用到“background-image”，而不僅僅是“background”。

這裡是更新的程式碼：

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

此調(diào)整應(yīng)該可以使動畫平滑您為背景圖像尋找的過渡。請記住，在 CSS 轉(zhuǎn)換中使用背景圖片時，請始終指定「background-image」作為過渡屬性的目標。

以上是如何使用CSS3正確過渡背景影像？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！