Cara Menampilkan Teks pada Gambar Dengan CSS3 campur-campur-mode

Latar belakang gambar tampak hebat di belakang teks tampilan besar. Namun, implementasi CSS-nya tidak semudah itu. Kita bisa menggunakan background-clip: teks; properti, namun itu masih fitur eksperimental tanpa dukungan browser yang memadai.

Alternatif CSS untuk menampilkan latar belakang gambar di belakang teks adalah menggunakan campur-campur-mode milik. Blend mode untuk elemen HTML cukup didukung di semua browser desktop dan seluler modern dengan pengecualian beberapa, seperti Internet Explorer.

Dalam posting ini, kita akan melihat caranya campur-campur-mode (dua mode khususnya) bekerja, dan bagaimana Anda dapat menggunakannya menampilkan teks dengan latar belakang gambar dalam dua kasus penggunaan:

1. ketika gambar latar belakang dapat dilihat melalui teks
2. ketika gambar latar belakang Berlari teks

Lihat beberapa contoh dalam demo di bawah ini (gambar berasal dari unsplash.com).

Itu campur-campur-mode Properti CSS menentukan bagaimana konten dan latar belakang elemen HTML harus berbaur bersama berwarna.

Lihat daftar mode blending, dari mana kami akan gunakan berkembang biak dan layar dalam posting ini.

Pertama, mari kita lihat bagaimana dua mode campuran ini bekerja.

Bagaimana berkembang biak & layar mode campuran bekerja

Blending mode secara teknis adalah fungsi-fungsi itu menghitung nilai warna akhir menggunakan komponen warna elemen dan latar belakangnya.

Itu berkembang biak mode campuran

Dalam berkembang biak mode campuran, warna individu elemen dan latar belakangnya berlipat ganda, dan warna yang dihasilkan diterapkan ke versi campuran akhir.

Itu berkembang biak Mode campuran dihitung berdasarkan rumus berikut:

B (Cb, Cs) = Cb × Cs

dimana:Cb - Komponen warna latar belakangCs - Komponen warna elemen sumberB - Fungsi pencampuran

Kapan Cb dan Cs dikalikan, warna yang dihasilkan adalah perpaduan dari dua komponen warna ini, dan gelap seperti gelap dari dua warna.

Untuk membuat latar belakang gambar teks kami, kami harus fokus pada kasus kapan Cs (komponen warna elemen sumber) adalah hitam atau putih.

Jika Cs aku s hitam nilainya 0, warna keluaran juga akan menjadi hitam, karena Cb × 0 = 0. Jadi, ketika elemen tersebut berwarna hitam, itu tidak peduli apa warna latar belakangnya, yang bisa kita lihat setelah blending adalah hitam.

Jika Cs aku s putih nilainya 1, warna keluaran adalah apa pun Cb karenaCb × 1 = Cb. Jadi dalam hal ini kita melihat latar belakang secara langsung apa adanya.

Itu layar mode campuran

Itu layar Mode campuran bekerja mirip dengan berkembang biak mode campuran, tapi dengan hasil sebaliknya. Jadi, a latar depan hitam menunjukkan latar belakang apa adanya, dan a foreground putih menunjukkan putih dengan latar belakang apa pun.

Mari kita segera melihat formulanya:

B (Cb, Cs) = Cb + Cs - (Cb × Cs)

Kapan Cs aku s hitam (0), warna latar akan ditampilkan setelah blending, seperti:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Kapan Cs aku s putih (1) hasilnya akan menjadi putih dengan latar belakang apa pun, seperti:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. Gambar ditampilkan melalui teks

Untuk menampilkan teks yang ditampilkan melalui gambar latar belakangnya, kami menggunakan layar mode campuran dengan teks hitam dan ruang putih di sekitarnya.

 
 
air
 
 

 .backdrop lebar: 600px; tinggi: 210px; background-image: url (someimage.jpg); ukuran latar belakang: 100%; margin: otomatis;  .text color: black; background-color: putih; campur-campur-mode: layar; lebar: 100%; tinggi: 100%; ukuran font: 160pt; font-weight: bold; perataan teks: tengah; garis-tinggi: 210px; margin: 0;  

Saat ini teks kita terlihat seperti di bawah ini, pada langkah berikutnya kita akan menambahkan warna khusus ke latar belakang.

Menambahkan warna

Seperti yang mungkin sudah Anda duga sekarang, menggunakan mode campuran hanya menyisakan dua pilihan warna untuk area yang mengelilingi teks - hitam atau putih. Namun dengan putih, mungkin untuk menambahkan beberapa warna padanya menggunakan overlay, jika warna overlay cocok dengan gambar yang digunakan.

Untuk menambahkan warna ke area sekitarnya, tambahkan a

ke HTML untuk overlay, dan berikan itu warna latar belakang dengan transparansi tinggi. Juga gunakan campur-campur-mode: gandakan properti untuk overlay, karena membantu warna latar belakang overlay berbaur sedikit lebih baik dengan gambar muncul di dalam teks.

 
 
air
 
 
 

 .overlay warna latar: rgba (0,255.255, .1); campur-campur-mode: multiply; lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0;  

Dengan teknik ini, kita bisa mewarnai area sekitar di sekitar teks dengan latar belakang gambar:

Perhatikan bahwa teknik ini hanya bekerja dengan baik warna transparan halus. Jika Anda menggunakan warna yang sepenuhnya buram, atau warna yang tidak cocok dengan gambar, gambar yang muncul di dalam teks akan memiliki warna yang sangat terlihat dari warna yang digunakan, jadi kecuali jika Anda menginginkannya., hindari warna buram.

2. Teks dikelilingi oleh latar belakang gambar

Meskipun penempatan teks normal di atas latar belakang gambar membutuhkan teknik yang sama, Saya akan menunjukkan kepada Anda contoh bagaimana demo di atas terlihat seperti ketika efeknya terbalik, yaitu ketika warna teks putih dan latar belakang hitam.

 .text color: white; warna latar belakang: hitam; campur-campur-mode: layar; lebar: 100%; tinggi: 100%; ukuran font: 160pt; font-weight: bold; perataan teks: tengah; garis-tinggi: 210px; margin: 0;  

Anda dapat menggunakan hamparan yang sama untuk menambahkan beberapa warna pada teks, kecuali Anda ingin tetap putih.

 .overlay warna latar: rgba (0,255.255, .1); campur-campur-mode: multiply; lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0;  

Dan di bawah ini Anda dapat melihat seperti apa bentuknya:

Perhatikan bahwa di Internet Explorer, atau browser lain yang tidak mendukung campur-campur-mode properti, latar belakang gambar tidak akan muncul, dan teks akan tetap hitam (atau putih).