Cara Paparkan Teks pada Imej Dengan CSS3 campuran-gabungan-mod
Latar belakang imej kelihatan hebat di belakang teks paparan yang besar. Walau bagaimanapun, pelaksanaan CSS tidak begitu jelas. Kita boleh menggunakannya klip latar belakang: teks; harta, namun ia masih merupakan ciri percubaan tanpa sokongan pelayar yang mencukupi.
Alternatif CSS untuk menunjukkan latar belakang imej di belakang teks adalah menggunakan campuran-gabungan-mod harta. Gabungkan mod untuk elemen HTML disokong dengan baik di semua penyemak imbas desktop dan mudah alih moden dengan pengecualian beberapa, seperti Internet Explorer.
Dalam siaran ini, kita akan melihat bagaimana campuran-gabungan-mod (dua modnya khusus) berfungsi, dan bagaimana anda boleh menggunakannya memaparkan teks dengan latar belakang imej dalam dua kes penggunaan:
- apabila imej latar belakang boleh dilihat melalui teks
- apabila imej latar belakang berjalan sekitar teks
Lihat beberapa contoh dalam demo di bawah (imej adalah dari unsplash.com).
The campuran-gabungan-mod Hartanah CSS mentakrifkan bagaimana kandungan dan juga latar belakang elemen HTML harus Campurkan bersama warna.
Lihat senarai mod campuran, yang akan kami gunakan berganda dan skrin dalam jawatan ini.
Pertama, mari kita lihat bagaimana kedua-dua mod campuran tertentu berfungsi.
Bagaimana berganda & skrin kerja campuran
Mod campuran adalah secara teknikalnya berfungsi mengira nilai warna terakhir menggunakan komponen warna elemen dan latar belakangnya.
The berganda mod campuran
Di dalam berganda mod campuran, warna individu unsur-unsur dan latar belakang mereka didarabkan, dan warna yang dihasilkan digunakan pada versi akhir yang dicampur.
The berganda mod gabungan dikira mengikut formula berikut:
B (Cb, Cs) = Cb × Cs
di mana:Cb - Komponen warna latar belakangCs - Komponen warna unsur sumberB - Fungsi pengadun
Bila Cb dan Cs telah didarabkan, warna yang dihasilkan adalah campuran dua komponen warna ini dan adalah sebagai gelap sebagai gelap dari dua warna.
Untuk membuat latar belakang imej teks kami, kami perlu memberi tumpuan kepada kes ketika Cs (komponen warna unsur sumber) adalah sama ada hitam atau putih.
Jika Cs adalah hitam nilainya adalah 0, warna output juga akan menjadi hitam, kerana Cb × 0 = 0. Jadi, apabila elemen berwarna hitam, ia tidak kira apa warna latar belakang itu, semua yang kita boleh lihat selepas pengadunan adalah hitam.
Jika Cs adalah putih nilainya adalah 1, warna output adalah apa sahaja Cb kerana, keranaCb × 1 = Cb. Jadi dalam kes ini kita melihat latar belakang secara langsung seperti sedia ada.
The skrin mod campuran
The skrin mod campuran berfungsi sama dengan berganda mod campuran, tetapi dengan hasil yang bertentangan. Jadi, a latar depan hitam menunjukkan latar belakang seperti sedia ada, dan a latar depan putih menunjukkan putih dengan latar belakang apa pun.
Mari kita lihat dengan cepat formulanya:
B (Cb, Cs) = Cb + Cs - (Cb × Cs)
Bila Cs adalah hitam (0), warna latar belakang akan ditunjukkan selepas pengadunan, seperti:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
Bila Cs adalah putih (1) hasilnya akan putih dengan latar belakang mana-mana, seperti:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. Imej yang ditunjukkan melalui teks
Untuk memaparkan teks yang menunjukkan melalui imej latar belakang, kami menggunakan skrin mod campuran dengan teks hitam dan ruang sekeliling putih.
Air
.latar belakang lebar: 600px; ketinggian: 210px; background-image: url (someimage.jpg); saiz latar belakang: 100%; margin: auto; .text color: black; warna latar belakang: putih; campuran-campuran-mod: skrin; lebar: 100%; ketinggian: 100%; saiz fon: 160pt; font-weight: bolder; teks-align: center; garis ketinggian: 210px; margin: 0;
Pada masa ini teks kami kelihatan seperti di bawah, dalam langkah seterusnya kami akan menambah warna tersuai ke latar belakang.
Menambah warna
Seperti yang mungkin anda fikirkan sekarang, dengan menggunakan mod campuran, kami hanya memilih dua pilihan warna untuk kawasan yang mengelilingi teks itu - hitam atau putih. Walau bagaimanapun dengan putih, ia boleh menambah beberapa warna kepadanya menggunakan tindanan, jika warna tindanan perlawanan dengan baik dengan imej yang digunakan.
Untuk menambah warna ke kawasan sekitarnya, tambah a Air Dengan teknik ini, kita boleh mewarna kawasan sekitarnya di sekeliling teks dengan latar belakang imej: Perhatikan bahawa teknik ini berfungsi dengan baik hanya dengan warna telus yang halus. Jika anda menggunakan warna yang benar-benar kabur, atau warna yang tidak sepadan dengan imej, imej yang muncul di dalam teks akan mempunyai warna yang sangat kelihatan warna yang digunakan, jadi melainkan jika anda melihat untuk, mengelakkan warna-warna terang. Walaupun penempatan teks biasa ke atas latar belakang imej memerlukan teknik yang sama, Saya akan menunjukkan kepada anda contoh bagaimana demo di atas kelihatan seperti ketika kesan dibalikkan, iaitu warna teks berwarna putih dan latar belakang hitam. Anda boleh menggunakannya tindanan yang sama untuk menambah beberapa warna pada teks, melainkan jika anda ingin menyimpannya putih. Dan di bawah anda boleh melihat bagaimana kes sebalik seperti: Perhatikan bahawa di Internet Explorer, atau pelayar lain yang tidak menyokongnya campuran-campuran-mod: darab harta untuk tindihan, kerana ia membantu warna latar belakang tindanan campuran sedikit lebih baik dengan imej yang muncul di dalam teks.
.overlay background-color: rgba (0,255,255, .1); campuran-campuran-mod: darab; lebar: 100%; ketinggian: 100%; kedudukan: mutlak; atas: 0;
2. Teks yang dikelilingi oleh latar belakang imej
.teks color: white; warna latar belakang: hitam; campuran-campuran-mod: skrin; lebar: 100%; ketinggian: 100%; saiz fon: 160pt; font-weight: bolder; teks-align: center; garis ketinggian: 210px; margin: 0;
.overlay background-color: rgba (0,255,255, .1); campuran-campuran-mod: darab; lebar: 100%; ketinggian: 100%; kedudukan: mutlak; atas: 0;
campuran-gabungan-mod harta, latar belakang imej tidak akan muncul, dan teks akan tetap hitam (atau putih).
