Cara Memasukkan Gambar ke dalam Teks dengan CSS

Renovasi Otak - Mungkin anda sudah tidak asing lagi dengan gambar dan teks, namun jika dengan gambar didalam teks? Mungkin anda perlu ber-andai tentang itu.

Menyisipkan gambar ke dalam teks. Ya, hal tersebut ditujukan untuk mempercantik tampilan teks pada website ataupun blog. Dengan menambahkan gambar ke dalam teks, tampilan teks akan telihat lebih cantik dan elegan.
Tidak sedikit para desainer ternama yang menyisipkan gambar kedalam teks pada situsnya dengan tujuan tertentu. Ntah kenapa, tampilan website akan terlihat lebih profesional dengan menambahkan gambar ke dalam teksnya. Namun, tidak sedikit juga orang yang tidak menyukai dengan hal itu, ntah kenapa mungkin ia punya selera yang berbeda.
Lanjut ke topik utama, simak penjelasan berikut ini.

Menyisipkan Gambar ke dalam Teks

Untuk menyisipkan gambar ke dalam teks, anda cukup menambahkan kode CSS berikut:

Contoh penggunaan pada tag H1, CSS:

h1{
   background: url(https://2.bp.blogspot.com/-htrZT7p_YYU/XXjrfYzTJVI/AAAAAAAABkk/Pkwwu6A1U8Ad41rI2k9OmysIe0sfyjb3QCLcBGAsYHQ/s1600/preview-6413617eIUx4Pd2-low_0014.jpg) 50% 50%;
   background-size: cover;
   -webkit-text-fill-color:transparent;
   -webkit-background-clip:text;
}

Ubah url yang ditandai dengan url gambar yang anda inginkan
Jika anda tidak ingin menggunakan pada tag H1, silahkan ganti sesuai selera anda.Selanjutnya, setiap penggunaan tag H1, tampilan dari teks tersebut akan berbeda. Tentunya, terdapat gambar pada dalam teks tersebut.

<h1>RENOVASIOTAK</h1>

Cukup menarik bukan? dengan begitu, tampilan pada teks anda akan berbeda dengan yang lainnya. Tersebut merupakan cara memasukkan gambar ke dalam teks. Semoga bermanfaat