Dapatkah saya mengubah opasitas gambar latar belakang di css?

Question

Saat Anda menambahkan gambar latar belakang ke elemen <div>, Anda mungkin ingin mengubah opasitas gambar sehingga konten elemen <div> dapat menonjol dan lebih mudah dilihat

Table of Contents Show

Bagaimana cara mengubah opasitas gambar latar belakang?
Bagaimana Anda bisa mengubah transparansi gambar di CSS?
Bagaimana cara membuat gambar latar belakang menjadi buram gelap di CSS?
Bagaimana cara meringankan gambar latar belakang di CSS?

Misalnya, Anda memiliki badan HTML berikut

<div class="bg-doge">
  <h1 class="color-white">Hello World from the Doge!</h1>
</div>

Dan kemudian Anda menetapkan aturan CSS berikut untuk kelas bg-doge (gambar yang digunakan untuk contoh ini diunduh dari Unsplash)

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

_

Output dari kode di atas adalah sebagai berikut

Background image with opacity Gambar latar belakang dengan opasitas

Seperti yang Anda lihat, elemen <h1> di dalam tag <div> dipengaruhi oleh properti opacity, mengubahnya menjadi transparan seperti gambar latar belakang

Ini karena properti opacity_ berlaku untuk semua yang ada di dalam elemen container. Anda tidak dapat membuat elemen anak kurang transparan dari elemen induknya

Untuk mengatasi masalah ini, Anda perlu menempatkan gambar latar belakang sebagai anak dari tag <div> dengan menggunakan pemilih elemen semu

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

2

Lihatlah sintaks CSS berikut

.bg-doge {
  position: relative;
  height: 600;

  /* extra style to center the content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-doge:before {
  content: "";
  background-image: url(bg-doge.jpeg);
  position: absolute;
  background-size: cover;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
}

Pemilih semu

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

_2 di atas digunakan untuk membuat gambar latar belakang. Posisi absolut dan nilai atas, kiri, bawah, kanan diterapkan sehingga elemen semu memiliki ukuran yang sama dengan induknya

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

4 elemen semu diatur ke

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

5 untuk memposisikannya di bagian bawah pesanan. Tanpa

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

_4 properti, itu akan ditempatkan di atas elemen lain, menghalangi tampilan konten

Terakhir, posisi

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

_7 diatur ke

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

8 sehingga elemen semu terkandung di dalam <div>

Outputnya adalah sebagai berikut

Background image opacity fixed using pseudo-element Opasitas gambar latar diperbaiki menggunakan elemen semu

Sekarang transparansi gambar latar belakang tidak akan diterapkan pada konten tag <div>

Selain itu, Anda juga dapat menyetel gambar latar belakang menjadi transparan hanya saat kursor diarahkan ke elemen dengan menggunakan sintaks CSS berikut

Bagaimana cara mengubah opasitas gambar latar belakang?

Pendekatan. Kita dapat menggunakan properti opacity di CSS yang digunakan untuk mengubah opacity suatu elemen. Nilai properti dapat diatur dalam rentang 0 hingga 1, di mana "0" sepenuhnya transparan dan "1" buram. Nilai desimal apa pun dapat digunakan di antaranya untuk mengatur opacity yang sesuai.

Bagaimana Anda bisa mengubah transparansi gambar di CSS?

Transparansi menggunakan RGBA . Nilai warna RGBA ditentukan dengan. rgba (merah, hijau, biru, alfa). Parameter alfa adalah angka antara 0. 0 (transparan penuh) dan 1. 0 (sepenuhnya buram). use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Bagaimana cara membuat gambar latar belakang menjadi buram gelap di CSS?

Mengatur dasar

Ini foto aslinya. Pengaturan css. .

Dengan mengatur opacity menjadi 0. 5 , gambar akan menjadi putih (ish).

Kita bisa menggunakan ini untuk membuat efek hover yang keren. .

Untuk membuatnya lebih gelap, kami menambahkan linear-gradient(black,black). .

Singkatnya

Bagaimana cara meringankan gambar latar belakang di CSS?

Untuk menyetel kecerahan gambar di CSS, gunakan filter brightness(%) . Ingat, nilai 0 membuat gambar menjadi hitam, 100% untuk gambar asli dan default. Istirahat, Anda dapat mengatur nilai pilihan Anda, tetapi nilai di atas 100% akan membuat gambar lebih cerah.

kode css