Transparansi Gambar dan Elemen HTML

Properti yang bisa kalian gunakan untuk membuat elemen jadi transparan adalah opacity. Opacity bahasa Indonesianya adalah opasitas. Opasitas merupakan lawan kata dari transparansi. Jika opasitas 0 maka objek akan terlihat transparan. Sebaliknya, jika nilai opasitas penuh, maka suatu objek akan terlihat sepenuhnya.

Nilai properti opacity bisa berupa persentase, initial, atau inherit. Untuk membuat objek terlihat transparan, kalian harus memberikan nilai selain 0% dan 100%.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
    	body{
    	    background:yellow;
    	}
    	#gambarku{
	    opacity : 50%;
	}
		
	.teks{
            background: green;
            color:red;
	    opacity : 75%;
	}
    </style>
</HEAD>
<BODY>
    <img src="gambarku.jpeg" id="gambarku">
    <div class="teks">
        <p>Paragraf kesatu</p>
        <p>Paragraf kedua</p>
        <p>Paragraf ketiga</p>
    </div>
</BODY>
</HTML>

Properti opacity mempengaruhi opasitas seluruh elemen bagian elemen. Jika kalian hanya membuat warna background atau tulisan transparan kalian bisa menggunakan fungsi RGBA dan HSLA pada properti color dan background.

Kalau hanya ingin membuat teks tidak terlihat sebaiknya jangan gunakan opacity. Ada properti lain yang bisa kalian gunakan untuk membuat elemen HTML tidak terlihat.