Cara menggunakan opacity di css

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Example explained

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Opacity adalah tingkat kejelasan dari suatu elemen. Opacity: 0 menunjukkan tingkat paling rendah dimana elemen yang bersangkutan menjadi tidak terlihat dan opacity: 1 menunjukkan tingkat paling tinggi dimana objek yang dimaksud tampak sangat jelas. Opacity: 1 adalah nilai default dari sebuah elemen.

Opacity juga digunakan untuk transparansi objek. Dimana semakin kecil nilai opacity maka semakin transparan elemen tersebut. Begitu pun sebaliknya

Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat

IE9, Firefox, Chrome, browser Opera, dan Safari menggunakan sifat transparansi gambar mungkin menjadi buram. nilai properti opacity 0,0-1,0. nilai-nilai yang lebih kecil membuat elemen lebih transparan.

IE8 dan versi sebelumnya menggunakan filter: alpha (opacity = x). X dapat mengambil nilai-nilai 0-100. nilai-nilai yang lebih rendah membuat elemen lebih transparan.

Contoh 2 - Gambar Transparansi - hover efek

Gerakkan mouse Anda di atas gambar:

gaya CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Blok pertama adalah kode CSS dalam Contoh 1, dan sejenisnya. Selain itu, kami juga menambahkan apa yang terjadi ketika pengguna menggerakkan melayang mouse salah satu gambar. Dalam hal ini, ketika pengguna menggerakkan mouse di atas gambar, kami berharap bahwa gambar jelas.

Ini adalahCSS: opacity = 1.

IE8 danpenggunaan sebelumnya: filter: alpha (opacity = 100 ).

Ketika pointer mouse menjauh dari gambar, gambar akan kembali transparansi.

Contoh 3 - Transparan kotak teks

Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan. Teks dalam kotak transparan.

Source code adalah sebagai berikut:

This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.

Pertama, kita membuat ketinggian tetap dan lebar elemen div dengan gambar latar belakang dan perbatasan. Kemudian kita membuat elemen div kecil di dalam div pertama. Ini div juga memiliki lebar tetap, warna latar belakang, perbatasan - dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks dalam elemen P.

Halo sobat digital, pada tutorial kali ini saya akan berbagi sedikit tips untuk kalina yang baru belajar dunia Website khususnya di User Interface.

Topik yang akan kita bahas kali ini adalah gimana sih cara membuat Background color Transparan dengan css?

Background transparant adalah sebuah gambar atau warna yang memiliki tingkat opacity (Ketebalan) yang kecil sehingga objek yang berada dibelakangnya akan terlihat.

Biasanya teknik background transparant ini digunakan untuk mempercantik tampilan sebuah website agar website tersebut lebih menarik dan tentunya membuat tampilan website lebih hidup.

Kalau sudah jelas, yuk tanpa panjang lebar lagi, mari kita simak caranya dibawah ini gengss :)

Cara Membuat Background Color Transparan Dengan CSS

Pertama tama buatlah file projek/latihan baru yan berisikan komponen html.

Pada file HTML tersebut, buatlah sebuah baris kode seperti berikut ini :

See the Pen vYKgGVZ by gedesugandi (@gedesugandi) on CodePen.

Penjelasan kode CSS diatas:

Body , pada tag body, saya memberikan background gambar, yang mana itu digunakan untuk sebagai contoh objek yang akan berada dibelakang kotak nantinya.

.transparent, pada class tersebut berisikan beberapa baris css yang digunakan untuk membuat kotak dan membentuk background tranparant.

Inti dari kode diatas supaya background menjadi transparant adalah perintah ini background-color:rgba(0, 0, 0, 0.5);

Kenapa warnanya abu-abu transparant? itu karena kode warna RGB(Red, Green, Blue) pada contoh diatas adalah 0,0,0 yang mana itu adalah kode warna hitam dan di paling belakang karena kita memberikan opacity 0.5 maka warna hitam tersebut berubah menjadi tranparant keabu abuan. Semakin besar nilai opacity yang diberi maka semakin tebal pula warna hitamnya begitu juga sebaliknya, jika semakin kecil maka semakin transparant juga waranya.

Gimana? Gampang kan?

Sekian tutorial Cara Membuat Background Color Transparan Dengan CSS, semoga ilmunya bermanfaat untuk kita semua :)

apabila ada pertanyaan dan ada yang kurang jelas bisa kalian tanyakan di kolom komentar dibawah ini

Tag :

Bedahdigital Seorang blogger pemula yang berusaha berbagi tips dan trik seputaran dunia digital serta info menarik lainnya