Bagaimanakah saya boleh menindih kecerunan pada imej latar belakang dalam CSS?

Tindan Kecerunan pada Imej Latar Belakang: Membongkar Penyelesaian

Ketidakupayaan untuk memaparkan kedua-dua imej latar belakang dan tindanan kecerunan secara serentak boleh mengecewakan. Walau bagaimanapun, penyelesaiannya adalah mudah dan terletak pada susunan elemen yang betul dalam pengisytiharan CSS anda.

Untuk mencapai kesan pudar yang diingini daripada hitam kepada lutsinar di bahagian bawah latar belakang anda, langkah berikut adalah penting:

1. Letakkan URL imej latar belakang di hujung baris: Bertentangan dengan gerak hati, URL untuk imej latar belakang hendaklah diletakkan selepas pengisytiharan kecerunan, seperti yang dilihat dalam kod yang diperbetulkan:

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

2. Pastikan sintaks yang betul: Kod contoh mengandungi sintaks CSS yang sah untuk kecerunan pengisytiharan. Berbilang hentian warna ditakrifkan dalam kurungan, dan kedudukan permulaan dan penamat kecerunan ditentukan menggunakan peratusan.
3. Sediakan ketinggian untuk bekas: Untuk memastikan kesan kecerunan kelihatan, ketinggian mesti ditetapkan untuk elemen bekas yang mengandungi imej kecerunan dan latar belakang. Dalam kod yang disediakan, elemen ".css" mempunyai ketinggian 200 piksel.

Dengan pelarasan ini dilaksanakan, tindanan kecerunan kini akan dipaparkan dengan betul di atas imej latar belakang, mencapai kesan pudar yang diingini.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menindih kecerunan pada imej latar belakang dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!