Bagaimana Anda mengubah opacity teks di css?

Saat membuat situs web, Anda mungkin sering ingin menempatkan gambar latar belakang pada HTML <div> yang juga berisi teks atau konten lainnya

Dan untuk menonjolkan teks, Anda ingin mengubah opasitas gambar latar tersebut di CSS sehingga menjadi semi-transparan. Tapi Anda sudah mencobanya, dan Anda tidak bisa mengubah opasitas gambar latar belakang tanpa juga mempengaruhi teks atau elemen turunan lainnya

Apa yang bisa kau lakukan?

Jadi, pertama, kabar buruknya…

Tidak ada properti CSS yang dapat Anda gunakan untuk mengubah opasitas gambar latar saja

Tidak seperti warna latar belakang, yang memungkinkan Anda menyesuaikan saluran alfa untuk mengontrol opasitas, warna tersebut tidak ada untuk properti background-image . Mungkin suatu hari nanti?

Sementara itu, mari kita lihat mengapa mengubah opasitas akan memengaruhi teks atau konten lain dalam elemen tersebut. Kemudian kami akan membahas solusi yang dapat Anda gunakan

Perubahan opasitas pada induk akan diwariskan ke elemen anak

Misalnya, Anda memiliki elemen div dengan beberapa teks di dalamnya, dan Anda telah menyetel background-image pada elemen induk .hero 

<div class="hero">
    <h1>Cute kittehs everywhere!</h1>
</div>

Kemudian Anda menyesuaikan opacity induk untuk mencoba membuat gambar latar semi transparan, seperti ini

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

Opacity secara otomatis diwariskan oleh elemen anak, jadi ketika Anda menyesuaikan opacity dari elemen induk, itu akan mempengaruhi semua elemen anak di lapisan induk tersebut. (Ini mirip dengan bagaimana  juga diwariskan. )

Jadi Anda akan berakhir dengan semua elemen, baik gambar latar dan teks, memiliki opasitas yang berkurang

Larutan. Letakkan gambar latar belakang ke dalam elemen semu induk

Untuk memperbaiki masalah ini, kita perlu menempatkan gambar latar belakang ke elemen anak dari induknya. Ini akan memastikan bahwa gambar latar belakang dan konten teks akan berada di "lapisan" mereka sendiri di induknya. Anda kemudian dapat mengontrol opasitas setiap lapisan tanpa mempengaruhi satu sama lain

Salah satu pendekatan yang dapat Anda gunakan adalah menempatkan gaya background-image dalam elemen pseudo elemen induk

.hero {
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 14rem;
  line-height: 0.9;
  text-align: center;
}

Karena elemen pseudo adalah semacam anak dari induk, Anda dapat mengubah opasitasnya tanpa memengaruhi konten teks

Untuk membuat elemen semu itu berukuran sama dengan induknya, Anda harus benar-benar memposisikannya dan menyetel nilai atas, kanan, bawah, dan kirinya ke nol agar tidak runtuh. Selain itu, sebagai elemen semu, ia harus memiliki content properti yang ditetapkan, jika tidak, ia tidak akan muncul di halaman

(Anda juga dapat menempatkan gambar latar belakang ke dalam elemen turunannya sendiri, tetapi menggunakan elemen semu membantu menjaga agar HTML tetap disederhanakan. )

Kemudian untuk teks, yang ada di tag 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

Terakhir, jangan lupa untuk menyetel orang tua ke 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

Sekarang, teks akan tetap berada pada opacity default 1, dan pengaturan opacity yang dikurangi akan dibatasi pada gambar latar belakang di elemen pseudo

Saya memiliki kode untuk contoh di atas dalam Codepen— jangan ragu untuk bermain-main dengannya

Solusi alternatif. tambahkan overlay dengan pengurangan opacity dan background-color di atas gambar latar belakang

Solusi lain adalah alih-alih mengubah opasitas gambar latar belakang, Anda menambahkan overlay dengan warna latar semi-transparan di atas gambar latar belakang.

Markup HTML akan sama dengan solusi sebelumnya. Di CSS, Anda dapat mengatur gambar latar langsung di elemen induk, tanpa perubahan opacity

Elemen semu induk kemudian akan berisi warna latar semi-transparan

Hal ini dilakukan dengan menyetel properti 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

Nilai alfa dapat berkisar dari 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

Inilah yang akan terlihat seperti dalam kode

.hero { 
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://placekitten.com/1200/800');
    background-size: cover;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.25);
}

Hasilnya akan terlihat seperti ini

Dan inilah Codepen untuk solusi overlay ini

Kedua solusi memiliki hasil yang tampak sangat mirip. Solusi pertama memiliki gambar latar belakang yang diatur pada opacity 75%. Dan solusi kedua menambahkan overlay hitam pada opacity 25%. Jadi mereka tidak persis sama, tetapi mereka serupa

Solusi overlay juga berguna jika Anda ingin menambahkan warna kencang ke gambar latar belakang. Inilah tampilannya jika kita menyetel overlay 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}

.hero {
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 14rem;
  line-height: 0.9;
  text-align: center;
}

Bagaimana cara mengubah opasitas teks tanpa memengaruhi CSS?

Bagaimana cara menambahkan transparansi ke teks?

Bagaimana opacity bekerja di CSS?

Bagaimana cara mengubah warna opacity di CSS?