Bagaimanakah Saya Boleh Membuat Peralihan Fade-In/Fade-Out untuk Imej Latar Belakang dalam CSS3?

Peralihan Kesan Pudar Imej dalam CSS3

Melaksanakan kesan 'fade-in fade-out' menggunakan peralihan CSS adalah mungkin untuk elemen, tetapi bagaimana pula dengan imej latar belakang?

Seorang pembaca baru-baru ini bergelut untuk mencapai ini dengan latar belakang menggunakan CSS berikut:

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

Isunya adakah sifat latar belakang itu tidak boleh dianimasikan untuk elemen seperti teks.

Penyelesaian terletak pada peralihan sifat imej latar belakang secara berasingan, seperti yang dilihat dalam CSS yang dikemas kini ini:

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

Ini membolehkan untuk peralihan pudar imej. Sila ambil perhatian bahawa pada masa ini, Chrome, Opera dan Safari menyokong peralihan ini secara asli. Firefox dan Internet Explorer mungkin tidak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Peralihan Fade-In/Fade-Out untuk Imej Latar Belakang dalam CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!