Menyatukan Dua Background Dan Memanipulasinya Dengan Background-Blend-Mode

Hai teman-teman semuanya, apa kabar? masih semangat belajarnya? kita lanjut lagi belajarnya ya teman-teman? kali ini saya akan menshare tips gimana caranya menyatukan dua background dan memanipulasinya dengan background-blend-mode.

Background-blend-mode adalah salah satu teknis css untuk memanipulasi gambar seperti halnya pada photoshop namun kita akan praktekannya pada css, oke mungkin untuk lebih jelasnya kita langsung saja praktekan, pertama teman-temn harus menyediakan dua buah gambar dimana satu akan kita gunakan sebagai background dengan format gambarnya jpg, lalu sediakan satu gambar lagi dengan format png jika sudah, silahakan teman-teman buat sebuah file dan ketikan script berikut ini :

<!DOCTYPE html>
<html>
	<head>
		<title>Latihan</title>
	</head>
	<body>
		<div id="kotak"></div>
	</body>
</html>

Saya membuat sebuah div kotak yang nanti akan kita atur cssnya, sekarang kita akan atur cssnya silahkan teman-temn tambahkan script css internal seperti berikut ini:

<style>
		#kotak { 
		  width: 300px;
		  height: 200px;
		  background-repeat: no-repeat, repeat;
		  margin:auto;
		  background-image: url("hunter.png"), url("bg.jpg");
		}
</style>

saya mengatur kotak tersebut berada ditengah dengan tinggi 200 dan lebar 300, lalu saya menyisipkan 2 gambar dimana gambar pertama adalah ini:

dan gambar kedua adalah ini:

jika teman-teman save maka hasilnya akan seperti berikut ini:

gamabrnya akan menyatu, kita juga dapat mengatur letak background dengan menggunakan background position, atau propertis background yang lainnya, namun kali ini saya akan memanipulasi gambar ini dengan menggunakan background-blend-mode, silahakan teman-teman tambahkan script berikut ini pada bagian cssnya:

background-blend-mode:lighten;

Maka jika teman-teman save hasilnya akan seperti berikut ini:

Gimana baugs bukan, kita bisa membuat gambar seperti ini dengan menggunakan css, untuk nilai blend-mode nya teman-teman bisa gunakan nilai lainnya karna banyak sekali nilai dari blend-mode,

Oke teman-teman saya rasa cukup sampai sini dulu untuk tutorial kali ini tentang menyatukan dua background dan memanipulasinya dengan background-blend-mode, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya,

Terima kasih