如何使用CSS3正確過渡背景影像？-css教學-PHP中文網

如何使用CSS3正確過渡背景影像？

Susan Sarandon

發布： 2024-12-27 00:01:09

原創

319 人瀏覽過

How to Properly Transition Background Images with 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;
}

登入後複製

上面的程式碼演示了值得稱讚的嘗試，但它未能解釋之間微妙但關鍵的區別背景屬性和背景圖像屬性。要為背景圖像設定動畫，您必須將過渡套用到“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;
}

登入後複製

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

以上是如何使用CSS3正確過渡背景影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！