Background pada css dapat menerima beberapa properti lain yang dipisahkan dengan koma, sehingga kita dapat menambahkan sesuatu diatas background yang ada seperti layer yang ada pada photoshop. Berikut ulasan singkatnya.
Pada gambar diatas kita dapat menambahkan gradient didepan gambar tersebut sehingga menjadi seperti dibawah ini tanpa menggunakan image editor melainkan dengan merubah css nya.
berikut adalah scriptnya.
<style>
.tinted-image {
width: 300px;
height: 200px;
background:
/* gradient atas biru dan bawah hijau yang transparant */
linear-gradient(
rgba(0, 0, 255, 0.45),
rgba(0, 255, 0, 0.45)
),
/* bottom, image */
url(images.jpg);
}
</style>
<div class="tinted-image"></div>
Selamat ber-eksperimen dan semoga bermanfaat.
gambar asli |
hasilnya |
<style>
.tinted-image {
width: 300px;
height: 200px;
background:
/* gradient atas biru dan bawah hijau yang transparant */
linear-gradient(
rgba(0, 0, 255, 0.45),
rgba(0, 255, 0, 0.45)
),
/* bottom, image */
url(images.jpg);
}
</style>
<div class="tinted-image"></div>
Selamat ber-eksperimen dan semoga bermanfaat.