Tidak ada properti Show
Saat membuat situs web, Anda mungkin sering ingin menempatkan gambar latar belakang pada HTML Dan untuk menonjolkan teks, Anda ingin mengubah opasitas gambar latar tersebut di CSS sehingga menjadi semi-transparan. Tapi Anda sudah mencobanya, dan Anda tidak bisa mengubah opasitas gambar latar belakang tanpa juga mempengaruhi teks atau elemen turunan lainnya Apa yang bisa kau lakukan? Jadi, pertama, kabar buruknya… Tidak ada properti CSS yang dapat Anda gunakan untuk mengubah opasitas gambar latar saja Tidak seperti warna latar belakang, yang memungkinkan Anda menyesuaikan saluran alfa untuk mengontrol opasitas, warna tersebut tidak ada untuk properti Sementara itu, mari kita lihat mengapa mengubah opasitas akan memengaruhi teks atau konten lain dalam elemen tersebut. Kemudian kami akan membahas solusi yang dapat Anda gunakan Perubahan opasitas pada induk akan diwariskan ke elemen anakMisalnya, Anda memiliki elemen div dengan beberapa teks di dalamnya, dan Anda telah menyetel _Kemudian Anda menyesuaikan opacity induk untuk mencoba membuat gambar latar semi transparan, seperti ini
Opacity secara otomatis diwariskan oleh elemen anak, jadi ketika Anda menyesuaikan opacity dari elemen induk, itu akan mempengaruhi semua elemen anak di lapisan induk tersebut. (Ini mirip dengan bagaimana juga diwariskan. ) Jadi Anda akan berakhir dengan semua elemen, baik gambar latar dan teks, memiliki opasitas yang berkurang Jelas bukan yang ingin kita lihatLarutan. Letakkan gambar latar belakang ke dalam elemen semu indukUntuk memperbaiki masalah ini, kita perlu menempatkan gambar latar belakang ke elemen anak dari induknya. Ini akan memastikan bahwa gambar latar belakang dan konten teks akan berada di "lapisan" mereka sendiri di induknya. Anda kemudian dapat mengontrol opasitas setiap lapisan tanpa mempengaruhi satu sama lain Salah satu pendekatan yang dapat Anda gunakan adalah menempatkan gaya
Karena elemen pseudo adalah semacam anak dari induk, Anda dapat mengubah opasitasnya tanpa memengaruhi konten teks Untuk membuat elemen semu itu berukuran sama dengan induknya, Anda harus benar-benar memposisikannya dan menyetel nilai atas, kanan, bawah, dan kirinya ke nol agar tidak runtuh. Selain itu, sebagai elemen semu, ia harus memiliki (Anda juga dapat menempatkan gambar latar belakang ke dalam elemen turunannya sendiri, tetapi menggunakan elemen semu membantu menjaga agar HTML tetap disederhanakan. ) Kemudian untuk teks, yang ada di tag 0 , Anda harus menyetelnya ke 1 agar berada di atas elemen semu dan gambar latar belakang. Jika Anda tidak menyetel properti 2 secara eksplisit, properti tersebut akan disembunyikan di bawah elemen semu yang benar-benar diposisikan diTerakhir, jangan lupa untuk menyetel orang tua ke 1 untuk menjaga anakSekarang, teks akan tetap berada pada opacity default 1, dan pengaturan opacity yang dikurangi akan dibatasi pada gambar latar belakang di elemen pseudo Saya memiliki kode untuk contoh di atas dalam Codepen— jangan ragu untuk bermain-main dengannya Solusi alternatif. tambahkan overlay dengan pengurangan opacity dan background-color di atas gambar latar belakangSolusi lain adalah alih-alih mengubah opasitas gambar latar belakang, Anda menambahkan overlay dengan warna latar semi-transparan di atas gambar latar belakang. Markup HTML akan sama dengan solusi sebelumnya. Di CSS, Anda dapat mengatur gambar latar langsung di elemen induk, tanpa perubahan opacity Elemen semu induk kemudian akan berisi warna latar semi-transparan Hal ini dilakukan dengan menyetel properti 4 menggunakan , dengan tiga karakter pertama adalah nomor warna RGB, dan angka terakhir adalah setelan alfa atau transparansi. Kami menggunakan 6 untuk warna RGB, yang diterjemahkan menjadi hitamNilai alfa dapat berkisar dari _7 (0% opasitas) hingga 8 (100% opasitas). Jadi nilai kami 9akan menghasilkan overlay dengan opasitas 25%Inilah yang akan terlihat seperti dalam kode
Hasilnya akan terlihat seperti ini Dan inilah Codepen untuk solusi overlay ini Kedua solusi memiliki hasil yang tampak sangat mirip. Solusi pertama memiliki gambar latar belakang yang diatur pada opacity 75%. Dan solusi kedua menambahkan overlay hitam pada opacity 25%. Jadi mereka tidak persis sama, tetapi mereka serupa Solusi overlay juga berguna jika Anda ingin menambahkan warna kencang ke gambar latar belakang. Inilah tampilannya jika kita menyetel overlay 4 ke 1
Bagaimana cara membuat latar belakang gambar transparan di CSS?Contoh dijelaskan
. create a element (class="background") with a background image, and a border. Kemudian kita membuat
Apa itu transparansi opasitas CSS?Properti CSS opasitas mengatur opasitas elemen. Opasitas adalah sejauh mana konten di balik elemen disembunyikan, dan kebalikan dari transparansi .
Bagaimana cara membuat latar belakang saya transparan sepenuhnya?Jadikan Latar Belakang Anda Transparan Menggunakan Adobe Photoshop . Buka File Logo Tambahkan Lapisan Transparan. Pilih "Lapisan" > "Lapisan Baru" dari menu (atau cukup klik ikon kotak di jendela lapisan). . Hapus latar belakang. . Simpan Sebagai Gambar PNG Transparan |