Menggabungkan beberapa image menjadi satu image tidak lagi harus dilakukan dengan menggunakan software image editing. Anda bisa memanfaatkan property css3 multiple background images. Dengan properti ini beberapa gambar image bisa digabungkan menjadi satu hingga menghasilkan sebuah image baru. Anda bahkan bisa juga menggabungkan image animasi gif ke dalamnya sehingga image baru yang nantinya dihasilkan tentu saja terlihat sebagai image animasi gif. Agar image bisa ditampilkan secara sempurna menurut keinginan, beberapa background-properti lain bisa ditambahkan kedalamnya sehingga posisi background, pengulangan background dan ukurannya bisa diatur.
Kode dasar multiple background images
background-image:url(image-1.jpg), url(image-2.gif), url(image-3.png), url(image-4.jpg);
Multiple background images dan pengaturan lainnya
background-image:url(image-1.jpg), url(image-2.gif), url(image-3.png), url(image-4.jpg); background-repeat:no-repeat ,repeat-x, no-repeat, no-repeat; background-position:left center,top center, bottom left, center; background-size:120px auto, 65px 40px, 20px 50px,100% 100%;
Contoh kode Multiple background images dalam sebuah elemen
div{
margin:20px auto;
width:400px;
height:300px;
padding:20px;
border:5px solid #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYRtxrQ_nRfOzxbdwjRgOCNM7Kr8Zv8CfCmdQlxCd8HOJFyz7N6_bkSFelZeodUd9jIyRlUNgqoN0GK6NVnBLcmYWaen3SKowlbZxeFObokunO6AkNpa1YBkJOWj1b4CA-uHzjdiCeOs/),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOoIkJArPeMPcAbJEl9_VU_TFhQEmdoh2yKaEOo6Kyriq3FYmiO1-ZxLxALKP3NgMlMXIKGzPRKkJGiaVjg7Tp-rEFvMHbQQ13BNw0RW7opN-UCujVr8NXkU3XBQbfuxbrbiYlbPHkFsI/h120/hantu-animasi-gif-120.gif),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cFX_-l9e-ksZHJFLqFMkfNhbbGr26qQ4ZIY00ctk3K57eMcUtHICeDJAPFylfgCIJZ__6HTF8dfsJXj9gDudgR0eA3cnwQuj176X3n6cq-3QscNNPDsu7geDeEMJA7XEbznTztJWsbU/);
background-repeat:no-repeat;
background-position:60px 80px,95% 75px, top center;
background-size:100px auto,80px auto,100% 100%;
}
Di bawah akan disertakan demo multiple background images yang melibatkan gambar animasi gif. Lakukan beberapa perubahan atau mungkin bahkan penambahan image baru untuk melihat sejauh mana fungsi, kegunaan dan berbagai hal yang dapat kita lakukan melalui css3 properti multiple background images.
Please click the button to display. Continue with editing code and click to see the results!
Tidak ada komentar:
Posting Komentar