Bagaimana cara membuat opacity transparan latar belakang di css?

Tidak ada properti background-opacity_ di CSS, tetapi Anda dapat memalsukannya dengan memasukkan elemen semu dengan opacity reguler dengan ukuran persis elemen di belakangnya

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

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

Bagaimana cara membuat opacity transparan latar belakang di css?
Jelas bukan yang ingin kita lihat

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;
}
0 , Anda harus menyetelnya ke 
.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}
1 agar berada di atas elemen semu dan gambar latar belakang. Jika Anda tidak menyetel properti 
.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}
2 secara eksplisit, properti tersebut akan disembunyikan di bawah elemen semu yang benar-benar diposisikan di

Terakhir, jangan lupa untuk menyetel orang tua ke 

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

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

Bagaimana cara membuat opacity transparan latar belakang di css?

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;
}
4 menggunakan , dengan tiga karakter pertama adalah nomor warna RGB, dan angka terakhir adalah setelan alfa atau transparansi. Kami menggunakan 
.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}
6 untuk warna RGB, yang diterjemahkan menjadi hitam

Nilai alfa dapat berkisar dari 

.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}
_7 (0% opasitas) hingga 
.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}
8 (100% opasitas). Jadi nilai kami
.hero {
    background-image: url('http://placekitten.com/1200/800');
    opacity: 0.75;
}
9akan menghasilkan overlay dengan opasitas 25%

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

Bagaimana cara membuat opacity transparan latar belakang di css?

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;
}
4 ke 
.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;
}
1

Bagaimana cara membuat latar belakang gambar transparan di CSS?

Contoh dijelaskan . create a
element (class="background") with a background image, and a border. Kemudian kita membuat

Apa itu transparansi opasitas CSS?

Properti CSS opasitas mengatur opasitas elemen. Opasitas adalah sejauh mana konten di balik elemen disembunyikan, dan kebalikan dari transparansi .

Bagaimana cara membuat latar belakang saya transparan sepenuhnya?

Jadikan Latar Belakang Anda Transparan Menggunakan Adobe Photoshop .
Buka File Logo
Tambahkan Lapisan Transparan. Pilih "Lapisan" > "Lapisan Baru" dari menu (atau cukup klik ikon kotak di jendela lapisan). .
Hapus latar belakang. .
Simpan Sebagai Gambar PNG Transparan