Tidak ada properti yang sama dengan transparansi di CSS. Namun, Anda dapat membuat efek transparansi dengan menggunakan properti opasitas CSS3
Properti opacity menentukan transparansi gambar atau teks. Angka berkisar antara 0 dan 1. Nilai 1 adalah nilai default dan membuat elemen sepenuhnya buram. Nilai 0 membuat elemen sepenuhnya transparan. Nilai antara 0 dan 1 secara bertahap membuat suatu elemen menjadi jelas
Untuk membuat gambar transparan sederhana, Anda perlu menyetel opacity untuk
Di sini lihat contoh di mana gambar di latar belakang transparan karena opacity. 0. 5
Title of the document
Sekarang, mari kita lihat contoh di mana kotak transparan, dengan teks di dalamnya, dibuat pada gambar latar belakang. Buat kotak menggunakan
beri tag dan tambahkan properti padding-top dan text-align untuk meletakkan kotak di tengah latar belakang Anda. Kemudian, atur opacity untuk kotak Anda
Contoh membuat gambar latar belakang dengan kotak teks transparan
Title of the document
Dalam contoh kami berikutnya, kami menggunakan. setelah elemen semu, yang ditambahkan ke kelas "kotak".
Title of the document
This is a some text.
Sekarang, mari pertimbangkan kasus lain ketika efek opacity menghilang saat melayang. Di sini, properti opacity digunakan dengan the. hover pemilih untuk mengubah opacity pada mouse-over
Untuk merender gambar dengan latar belakang transparan, sertakan yang berikut ini di CSS Anda saat membuat gambar
body { background-color: transparent; }Contoh
Gambar ini memiliki background-color: transparent; disetel pada body
Cobalah sendiri
Gambar URL
Saat membuat gambar dari URL. Lewati CSS yang sama di param CSS dan latar belakang akan dibuat transparan
Bekerja dengan PNG saja
Transparansi hanya didukung oleh format file PNG. Secara default, semua gambar dirender sebagai PNG. Jika Anda merender gambar sebagai JPG atau Webp, latar belakangnya akan berwarna putih
Butuh bantuan?
Bicaralah dengan manusia. support@htmlcsstoimage. com. Kami selalu merespon dalam waktu 24 jam. Dan seringkali, bahkan lebih cepat
Transparansi memainkan peran penting dalam pengembangan ujung depan. Ini memungkinkan Anda memilih seberapa transparan elemen di halaman web Anda muncul
Anda dapat menyesuaikan transparansi dengan beberapa cara – karena tentu saja, di CSS, ada beberapa cara untuk melakukan hal yang sama
Properti CSS opacity adalah cara pertama yang mungkin terlintas di benak Anda untuk mengubah transparansi. Tetapi properti ini tidak selalu dapat membantu, terutama bila ada gambar latar belakang dengan teks di dalamnya yang ingin Anda buat transparan
Jadi dalam artikel ini, saya akan menunjukkan kepada Anda berbagai cara untuk menyesuaikan transparansi sehingga Anda dapat mulai menerapkannya dalam proyek pengkodean Anda
Transparansi Gambar dengan Properti Opasitas CSS
Untuk membuat gambar transparan, Anda dapat menggunakan properti CSS opacity, seperti yang saya sebutkan di atas. Sintaks dasar dari properti opacity ditunjukkan pada cuplikan kode di bawah ini
selector { opacity: value; } _Properti opacity mengambil nilai dari <img src="freecodecamp.png" alt="freecodecamp-logo" /> 1 hingga <img src="freecodecamp.png" alt="freecodecamp-logo" /> 2, dengan <img src="freecodecamp.png" alt="freecodecamp-logo" /> 3 menjadi nilai default untuk semua elemen. Semakin rendah nilainya, semakin transparan. Jadi jika suatu elemen diberi opasitas <img src="freecodecamp.png" alt="freecodecamp-logo" /> 4, itu tidak akan terlihat
Anda dapat menemukan contoh nilai opasitas yang berbeda dalam cuplikan kode di bawah ini
<img src="freecodecamp.png" alt="freecodecamp-logo" />Saya telah menambahkan beberapa CSS untuk memusatkan semua yang ada di halaman
body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; }Nilai opasitas <img src="freecodecamp.png" alt="freecodecamp-logo" />
_3 adalah default, sehingga gambar muncul seperti ini
Kode ini memberi kita opasitas 50%, dan Anda dapat melihat bahwa logonya sedikit memudar
Dengan opasitas <img src="freecodecamp.png" alt="freecodecamp-logo" /> _4, gambar 100% transparan, sehingga menjadi tidak terlihat
Satu-satunya cara untuk memastikan gambar ada di halaman adalah dengan memeriksanya dengan devtool browser Anda
Anda dapat menggunakan nilai opasitas ini untuk melakukan banyak hal – misalnya, Anda dapat menggunakannya untuk menyertakan teks di atas gambar pahlawan di situs web
Anda mungkin bertanya-tanya mengapa Anda ingin membuat konten tidak terlihat dengan nilai opasitas 0. Yah, ini bisa berguna dalam animasi, dan juga dalam membangun game HTM + CSS + JavaScript
Anda pasti ingin menggunakan pemosisian CSS untuk membantu Anda menyelaraskan berbagai hal. Saya akan membahas ini di bagian artikel selanjutnya
Transparansi Gambar Latar Belakang dalam HTML dan CSS
CSS menawarkan cara untuk menyetel gambar latar belakang untuk elemen penampung dengan properti _____ 5 _____ 7, jadi Anda tidak perlu melakukannya dengan CSS. Ini berarti Anda juga dapat menempatkan teks di dalam wadah
<div class="showcase"> <h1>A group of ring-tailed lemurs</h1> </div> body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } .showcase { background-image: url("ring-tailed-lemurs.jpeg"); height: 400px; width: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0.6; }Kelemahan dari pendekatan ini adalah opacity diatur untuk wadah tempat gambar dan teks berada. Jadi, opacity juga memengaruhi teks, bukan hanya gambar. Ini mungkin bukan yang Anda inginkan
Solusinya
Secara default, saat Anda menerapkan opasitas ke sebuah wadah, keturunannya juga akan mewarisinya
Solusi dalam situasi ini adalah menyetel gambar latar belakang di HTML. Hal ini memudahkan untuk menerapkan opacity hanya pada gambar, daripada menyetel gambar latar belakang untuk wadah di CSS
Kali ini, gambar dan teks akan dipisahkan, sehingga teks tidak akan mewarisi nilai yang ditetapkan untuk opacity
Ini berarti Anda juga harus menggunakan pemosisian CSS untuk menyelaraskan teks di dalam gambar
<div class="showcase"> <img src="ring-tailed-lemurs.jpeg" alt="lemurs" class="bg-image" /> <h1 class="bg-img-title">A group of ring-tailed lemurs</h1> </div> body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } .showcase { position: relative; } .bg-image { opacity: 0.7; } .bg-img-title { position: absolute; top: 420px; left: 20px; }Dalam cuplikan kode CSS di atas, saya menggunakan <img src="freecodecamp.png" alt="freecodecamp-logo" /> 9 untuk memusatkan semua yang ada di halaman
Wadah body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _0 elemen dengan kelas body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 1 diposisikan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 2, sehingga Anda dapat memposisikan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 3 teks body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 4 di dalamnya. Ini akan mendorong teks body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _3 ke pojok kiri atas gambar. Properti body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _6 dan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 7 kemudian digunakan untuk mendorong teks ke sudut kiri bawah gambar
Jika Anda bertanya-tanya apa itu properti body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _6 dan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 7, itu adalah properti yang dapat Anda akses saat menggunakan properti tampilan
Selain keduanya, Anda juga mendapatkan akses ke properti img { opacity: 0.5; } 0 dan img { opacity: 0.5; } 1. Mereka membiarkan Anda memposisikan elemen di mana saja
Pada akhirnya, gambar menjadi buram dan teks tidak terpengaruh
Kesimpulan
Pada artikel ini, Anda mempelajari cara menggunakan properti opacity CSS untuk membuat gambar menjadi transparan
Karena CSS tetap rumit dan agak aneh, ada baiknya menggabungkan properti opacity dengan fitur CSS lainnya seperti pemosisian agar dapat digunakan dengan benar
Selain pemosisian CSS, Anda juga dapat menggunakan properti opacity dengan elemen semu CSS seperti img { opacity: 0.5; } 3 dan img { opacity: 0.5; } 4, yang merupakan cara hacky dalam melakukan sesuatu
Terima kasih telah membaca, dan terus coding
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Pengembang web dan penulis teknis yang berfokus pada teknologi frontend
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai