Cara membuat teks dalam gambar html

Question

Teks di atas gambar mungkin merupakan desain web yang sering kita jumpai. Salah satu penerapannya ada pada komponen Hero atau Jumbotron yang menampilkan informasi untuk menarik perhatian pengunjung

Tentu ada banyak cara untuk membuat komponen tersebut. Pada artikel ini saya mencoba membuatnya dengan cara paling sederhana yang saya mengerti

Sebelum mulai, berikut saya lampirkan kode pelatihannya jika ingin sambil mempraktekannya

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Teks di atas gambar | divClassId</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="hero">
    <div class="hero__text">
      <h1>divClassId</h1>
      <p>Belajar HTML, CSS, dan JavaScript.</p>
    </div>
  </header>
</body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

Untuk image nya bisa di download di link berikut dan ganti namanya menjadi setup-pc. jpg

https. // hapus percikan. com/foto/Ql4Y26OsEoY

Sekarang, mari kita lakukan

Hero biasanya tampil dengan gambar di backgroundnya yang cenderung gelap. Tujuannya agar teks di atasnya kontras sehingga bisa dibaca

Untuk membuat efek tanpa harus mengedit gambar, kita bisa menggunakan style berikut

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

height: 100% ditambahkan sehingga ketinggian elemen .hero setinggi area browser
background-size: cover ditambahkan agar rasio gambar bertemu dan menyesuaikan dengan lebar dan tinggi elemen penampung (yang sekarang juga menjadi ukuran area browser). Oleh karena itu, gambar yang digunakan harus beresolusi tinggi agar tidak terlihat pecah
background-position: center ditambahkan agar fokus gambar yang muncul saat area browser diperkecil tetap berada di tengah

background-image_ ditambahkan menggunakan dua nilai, yaitu

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

_0. Digunakan untuk membuat background hitam dengan tingkat transparansi 50%. Kita perlu menggunakan fungsi CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

_1 karena efek

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

2 hanya ditampilkan ketika gambar gagal dimuat

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

_3. Digunakan untuk menunjukkan lokasi gambar yang akan ditampilkan

Selanjutnya kita tinggal mengatur penempatan teksnya. Gaya berikut sepenuhnya merupakan preferensi pribadi dan Anda mungkin perlu mengubahnya sesuai kebutuhan

Saya menghindari penggunaan properti

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

_4 agar elemen tidak keluar dari Aliran Dokumen Normal dan lebih suka menggunakan properti CSS Flexbox untuk mengaturnya. Berikut adalah gaya yang saya gunakan untuk membuat teks muncul di tengah Hero

.hero__text {
  align-items: center;
  color: #fcfcfc;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
}

_

height: 100% ditambahkan sehingga tinggi elemen

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

6 setinggi elemen penampung

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

_7 ditambahkan untuk mengaktifkan CSS Flexbox

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

_8 dan

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

9 ditambahkan sehingga elemen di dalamnya muncul di tengah, baik secara horizontal maupun vertikal

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

0 ditambahkan sehingga elemen di dalamnya tersusun dalam kolom (dari atas ke bawah)

```
.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}
```
1 perlu ditambahkan agar teks tampak rata di tengah. Meskipun properti ini terlihat tidak perlu, ketika lebar area browser dikurangi (atau web diakses pada perangkat yang lebih kecil) dan teks membuat baris baru, akan terlihat bahwa teks tidak benar-benar berada di tengah.

Hal lain yang bisa kamu tambahkan pada Hero adalah efek blur pada background. Untuk membuat efek ini kita hanya perlu menambahkan gaya berikut ke pemilih

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 1.5rem;
  height: 100%;
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

.hero {

}

.hero__text {

}

6

.hero__text {
  /* Kode lainnya */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Berbeda dengan properti

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

_3 yang efeknya akan mempengaruhi semua elemen di dalamnya, properti

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

4 hanya mempengaruhi elemen itu. Namun, kami juga perlu menambahkan awalan vendor

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

5 karena tidak semua browser secara resmi mendukung penggunaan properti ini

Hal penting lain yang perlu Anda ketahui tentang

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('./setup-pc.jpg');
  background-position: center;
  background-size: cover;
  height: 100%;
}

4 adalah bahwa browser Firefox sama sekali tidak mendukung properti ini, jadi pertimbangkan kembali jika Anda ingin menggunakannya

Apa HTML yang benar untuk menyisipkan gambar?

Untuk menyematkan gambar di situs web, Anda perlu menggunakan tag pada dokumen HTML.

Apa fungsi dari elemen Mark?

HTML < mark > elemen digunakan untuk mewakili teks yang ditonjolkan atau diberi tanda karena memiliki peranan penting, yang biasanya dimaksudkan untuk merujuk (merujuk) atau mengingatkan hal-hal penting yang berkaitan dengan konteks khusus suatu kalimat.

kode html