Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh menindih Gradien CSS pada Imej Latar Belakang?

Bagaimanakah saya boleh menindih Gradien CSS pada Imej Latar Belakang?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-07 06:41:16643semak imbas

How Can I Overlay a CSS Gradient on a Background Image?

Menindih Kecerunan CSS pada Imej Latar Belakang

Ramai pembangun menghadapi kesukaran apabila cuba memaparkan imej latar belakang dan kecerunan linear secara serentak. Matlamatnya adalah untuk mencipta peralihan beransur-ansur, biasanya daripada hitam kepada lutsinar, di bahagian bawah latar belakang. Walau bagaimanapun, dalam kebanyakan kes, hanya kecerunan atau imej yang kelihatan, bukan kedua-duanya.

Penyelesaian kepada isu ini terletak pada menentukan susunan unsur dalam gaya latar belakang dengan betul. Untuk berjaya menindih kecerunan pada imej, ikuti sintaks yang disemak ini:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

Dengan meletakkan URL imej latar belakang di hujung baris, kami memastikan ia muncul di bawah kecerunan, membenarkan kedua-dua elemen menjadi kelihatan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menindih Gradien CSS pada Imej Latar Belakang?. 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