Bagaimana untuk Mencipta Kesan Fade-in Secara Berperingkat pada Imej Latar Belakang Menggunakan Kecerunan CSS?

Mencipta Pudar Berperingkat dalam Imej Latar Belakang Menggunakan Kecerunan CSS

Apabila menggunakan kecerunan linear pada imej latar belakang, ia boleh menjadi mencabar untuk dipaparkan kedua-dua elemen secara serentak. Langkah berikut akan membimbing anda melalui proses:

Percubaan Salah:

body {
  background: url('background_image.jpg') no-repeat,
    -webkit-gradient(linear, left top, left bottom,
      from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

Dalam contoh ini, kecerunan tidak akan ditunjukkan apabila imej latar belakang diletakkan sebelum ia.

Pendekatan Betul:

Untuk memaparkan kecerunan dan imej latar belakang dengan betul, pastikan imej latar belakang diletakkan di hujung baris CSS, seperti berikut:

body {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))),
    url('background_image.jpg') no-repeat;
}

Dengan meletakkan URL imej di hujung baris, kecerunan akan menindih imej, memberikan kesan pudar yang diingini daripada hitam kepada lutsinar di bahagian bawah latar belakang.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Fade-in Secara Berperingkat pada Imej Latar Belakang Menggunakan Kecerunan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!