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.
Memasukkan Gambar ke Teks
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

Menyisipkan Gambar pada 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>

See the Pen
Menyisipkan Gambar ke dalam Teks
by Nando Rifky (@nandorifky)
on CodePen.

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

Incoming Search Terms
  • Cara membuat background gambar pada teks html
  • Menyisipkan gambar ke dalam teks html
  • Text dengan background gambar html
  • Menambahkan gambar pada text html
  • Membuat text keren html
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "Cara Memasukkan Gambar ke dalam Teks dengan CSS" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami