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 :

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:

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

menyatukan dua background dan memanipulasinya dengan background-blend-mode pada css1

dan gambar kedua adalah ini:

menyatukan dua background dan memanipulasinya dengan background-blend-mode pada css2

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

menyatukan dua background dan memanipulasinya dengan background-blend-mode pada css3

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:

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

menyatukan dua background dan memanipulasinya dengan background-blend-mode pada css4

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