6 Cara Menata Teks pada Gambar di CSS

Gambar bukan hanya pengisi ruang untuk halaman web. Mereka memiliki kegunaan yang kita mungkin tidak ingat ketika kita bekerja pada halaman web berdasarkan desain yang diberikan. Jadi mengapa kita mengalami kesulitan menggunakan gambar?

Gambar adalah cara cepat untuk menyampaikan pesan, dan ini telah lama digunakan untuk mendorong emosi yang membuatnya lebih mudah menerima pesan tertentu, memamerkan produk atau layanan, memecah konten menjadi informasi yang dapat dicerna, meningkatkan konten, dan banyak lagi.

Menambahkan gambar ke halaman web itu mudah, tetapi tidak mudah ketika Anda harus bekerja dengan teks pada gambar di CSS. Namun, dengan melewati kerumitan ini karena gambar dengan teks dapat memberi tahu 1.000 kata.

Pada artikel kali ini, kami akan membagikan desain dan cara yang dapat Anda gunakan untuk overlay teks pada gambar.

Tambahkan teks pada gambar

• Sesuaikan opacity atau kejelasan gambar
• Tambahkan warna latar belakang ke teks
• Ubah posisi teks
• Gunakan pencampuran warna gambar dan teks
• Gelapkan gambar dan gunakan teks terang

Disini kita akan menggunakan kode dari Metode 1 untuk penataan kecuali dinyatakan sebaliknya.

Perbedaan antara dua set kode starter adalah dalam Metode 1, konten teks adalah elemen anak dari div dengan gambar latar belakang, dan dalam Metode 2, kedua elemen ini adalah elemen saudara.

6 Cara Menata Teks Pada Gambar

1. Tambahkan teks pada gambar

Anda dapat menambahkan teks sebagai bagian dari gambar dengan editor foto atau aplikasi slide seperti PowerPoint, Google Slides, atau KeyNote. Namun, metode ini tidak berfungsi dalam desain ini karena konten terputus pada layar yang lebih kecil.

2. Sesuaikan opacity atau kejelasan gambar

Anda dapat menyesuaikan opacity dan kejelasan gambar latar belakang dengan editor foto atau dalam CSS. Mari kita fokus pada yang terakhir.

Jika teks Anda bersarang di dalam elemen dengan gambar latar belakang, teks Anda akan pudar ketika Anda menyesuaikan opacity gambar. Demikian juga, teks akan kabur jika Anda menerapkan properti blur pada gambar. Mungkin itu bukan efek yang Anda inginkan.

Sebagai gantinya, Anda dapat menggunakan properti linear-gradient, yang akan meringankan gambar sambil mempertahankan warna teks.

Untuk secara langsung menyesuaikan opacity atau mengaburkan properti dari gambar latar belakang sementara meninggalkan teks tidak terpengaruh akan mengharuskan Anda untuk mengedit HTML Anda. Teks tidak bisa menjadi elemen turunan dari elemen dengan gambar latar belakang. Anda harus menggunakan kode dalam Metode 2 dalam kode pemula untuk mencapai desain.

3. Tambahkan warna latar belakang ke teks

Anda dapat menambahkan latar belakang putih ke teks. Namun, beberapa orang mungkin tidak menyukai desain ini karena kontras antara teks dan latar belakang terlalu mencolok. Anda tidak dapat menggunakan opacity, karena akan membuat teks memudar.

Jika Anda ingin menggunakan desain ini, cara yang lebih baik untuk menambahkan warna latar belakang adalah dengan menggunakan nilai warna RGBA daripada warna solid.

4. Ubah posisi teks

Anda dapat mempertimbangkan untuk menyesuaikan teks secara manual agar posisinya dengan latar belakang yang jelas pada gambar Anda, tetapi ini mungkin bukan solusi yang layak karena posisi teks akan bergeser sesuai dengan ukuran layar yang berbeda.

5. Gunakan pencampuran warna gambar dan teks

Mode pencampuran adalah properti menarik yang bisa Anda gunakan untuk menata teks sambil mempertahankan keterbacaan. Ini berfungsi jika Anda memiliki gambar bersih.

6. Gelapkan gambar dan gunakan teks terang

Terakhir, alih-alih mempertahankan teks hitam dan latar belakang terang, Anda dapat menggelapkan gambar dengan gradien linier dan menggunakan teks putih.

Ringkasan:
Desain dan kode yang saya bagikan adalah beberapa dasar pada umumnya yang dapat Anda gunakan untuk halaman web. Sekarang, Anda harus terbiasa dengan cara menyatukan teks dan gambar pada halaman web dengan menggunakan properti CSS berikut:

• background-image: url ()
• background: linear-gradient ()
• color
• mix-blend-blend
• filter: blur ()
• opacity
• blur

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini