Membuat gambar Opacity /transparan dengan CSS ~ KODELOVER

Membuat gambar transparan dengan CSS itu mudah. Properti opacity CSS adalah bagian dari rekomendasi CSS3.

Contoh 1 - Membuat Gambar Transparan
Properti CSS3 untuk transparansi adalah opacity.Pertama, kami akan menunjukkan cara membuat gambar transparan dengan CSS.berikut contoh nya:
Contoh

img {
opacity: 0.4;
filter: alpha(opacity=40); /* Untuk IE8 and atw lbih kcil*/
}

Properti opacity bisa mengambil nilai dari 0,0 - 1.0. Nilai yang lebih rendah, semakin transparan.IE8 dan filter penggunaan sebelumnya: alpha (opacity = x). X bisa mengambil nilai dari 0 - 100. Nilai yang lebih rendah membuat elemen lebih transparan.

Contoh 2 - Transparansi Gambar - Efek Hover
Contoh

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 CSS pertama mirip dengan kode di Contoh 1. Sebagai tambahan, kami telah menambahkan apa yang seharusnya terjadi bila pengguna melayang di atas salah satu gambar. Dalam hal ini kita ingin gambar TIDAK transparan saat pengguna melayang di atasnya. CSS untuk ini adalah opacity: 1 ;.Saat penunjuk mouse bergerak menjauh dari gambar, gambar akan menjadi transparan kembali.

Contoh 3 - Teks dalam Kotak Transparan
Kode nya seperti berikut ini:
Contoh

<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
    background-color: #ffffff;
border: 1px solid black;
    opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

Pertama, kita membuat elemen <div> (class = "background") dengan gambar latar belakang, dan border. Kemudian kita buat lagi <div> (class = "transbox") di dalam <div> pertama. <Div class = "transbox"> memiliki warna latar belakang, dan border - divnya transparan. Di dalam transparent <div>, kita menambahkan beberapa teks di dalam elemen <p>.

KODELOVER

Membuat gambar Opacity /transparan dengan CSS

Related Post