Rumah >hujung hadapan web >tutorial css >Mengapa Tindanan Kecerunan CSS Saya Tidak Muncul Pada Imej Latar Belakang Saya?

Mengapa Tindanan Kecerunan CSS Saya Tidak Muncul Pada Imej Latar Belakang Saya?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-04 05:46:10450semak imbas

Why Doesn't My CSS Gradient Overlay Appear Over My Background Image?

Tindanan Kecerunan pada Imej Latar Belakang: Teka-teki CSS Diselesaikan

Percubaan untuk menggunakan tindanan kecerunan pada imej latar belakang anda untuk kesan pudar yang elegan boleh menjadi tugas yang membingungkan. Walaupun menyatakan kedua-dua kecerunan dan imej dalam CSS, hanya satu lapisan yang kelihatan dipaparkan.

Untuk menyelesaikan isu ini, semak semula struktur kod dan pastikan URL untuk imej latar belakang diletakkan pada penghujung daripada pengisytiharan gaya. Sintaks yang betul adalah seperti berikut:

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

Pengubahsuaian ini memastikan imej latar belakang diletakkan di atas lapisan kecerunan, menghasilkan gabungan yang lancar.

Atas ialah kandungan terperinci Mengapa Tindanan Kecerunan CSS Saya Tidak Muncul Pada Imej Latar Belakang Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn