Cara menghilangkan background transparan di html

Question

Tingkat opacity menggambarkan tingkat transparansi, di mana 1 tidak transparan sama sekali, 0. 5 adalah 50% tembus pandang, dan 0 benar-benar transparan

Table of Contents Show

Dukungan Peramban
Sintaks CSS
Nilai properti
Lebih Banyak Contoh
Contoh dijelaskan
Kotak Transparan
Transparansi menggunakan RGBA
Transparansi Gambar dengan Properti Opasitas CSS
Transparansi Gambar Latar Belakang dalam HTML dan CSS
Bagaimana cara menghapus transparansi dalam HTML CSS?
Bagaimana cara membuat latar belakang tidak terlihat di HTML?
Bagaimana cara menghilangkan latar belakang transparan di HTML?
Bagaimana cara menghapus latar belakang transparansi?

opasitas 0. 2

opasitas 0. 5

opasitas 1
(bawaan)

Catatan. Saat menggunakan properti opacity_ untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya juga menjadi transparan. Ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca. Jika Anda tidak ingin menerapkan opacity ke elemen anak, gunakan nilai warna RGBA sebagai gantinya (Lihat "Contoh Lainnya" di bawah)

Tampilkan demo ❯

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti

Propertyopacity4. 09. 02. 03. 19. 0

Catatan. IE8 dan versi sebelumnya mendukung alternatif, properti filter. Suka. Saring. Alfa(opasitas=50)

Sintaks CSS

kegelapan. nomor. awal. mewarisi;

Nilai properti

ValueDescriptionDemonumberMenentukan opacity. Dari 0. 0 (sepenuhnya transparan) hingga 1. 0 (sepenuhnya buram)Demo ❯initialMenetapkan properti ini ke nilai standarnya. Baca tentang initialinheritInherits properti ini dari elemen induknya. Baca tentang mewarisi

Lebih Banyak Contoh

Contoh

Properti opacity menambahkan transparansi ke latar belakang suatu elemen, dan juga ke semua elemen turunannya. Ini membuat teks di dalam elemen transparan sulit dibaca

div. pertama {
kegelapan. 0. 1;
}

div. kedua {
kegelapan. 0. 3;
}

div. ketiga {
kegelapan. 0. 6;
}

Cobalah sendiri "

Contoh

Untuk tidak menerapkan opacity ke elemen anak (seperti pada contoh di atas) gunakan nilai warna RGBA. Contoh berikut mengatur opacity untuk warna latar belakang, tetapi tidak untuk teks

Properti opacity_ sering digunakan bersama dengan pemilih :hover untuk mengubah opacity pada mouse-over

Contoh dijelaskan

Blok CSS pertama mirip dengan kode pada Contoh 1. Selain itu, kami telah menambahkan apa yang akan terjadi saat pengguna mengarahkan kursor ke salah satu gambar. Dalam hal ini kami ingin gambar TIDAK transparan saat pengguna mengarahkan kursor ke atasnya. CSS untuk ini adalah opacity:1;

Saat penunjuk mouse menjauh dari gambar, gambar akan menjadi transparan kembali

Contoh efek hover terbalik

Kotak Transparan

Saat menggunakan properti opacity_ untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya mewarisi transparansi yang sama. Ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca

Transparansi menggunakan RGBA

Jika Anda tidak ingin menerapkan opacity ke elemen turunan, seperti pada contoh kami di atas, gunakan nilai warna RGBA. Contoh berikut menetapkan opacity untuk warna latar belakang dan bukan teks

Anda belajar dari Bab Warna CSS kami, bahwa Anda dapat menggunakan RGB sebagai nilai warna. Selain RGB, Anda dapat menggunakan nilai warna RGB dengan saluran alfa (RGBA) - yang menentukan opasitas warna

Nilai warna RGBA ditentukan dengan. rgba (merah, hijau, biru, alfa). Parameter alfa adalah angka antara 0. 0 (transparan penuh) dan 1. 0 (sepenuhnya buram)

Transparansi memainkan peran penting dalam pengembangan ujung depan. Ini memungkinkan Anda memilih seberapa transparan elemen di halaman web Anda muncul

Anda dapat menyesuaikan transparansi dengan beberapa cara – karena tentu saja, di CSS, ada beberapa cara untuk melakukan hal yang sama

Properti CSS opacity adalah cara pertama yang mungkin terlintas di benak Anda untuk mengubah transparansi. Tetapi properti ini tidak selalu dapat membantu, terutama bila ada gambar latar belakang dengan teks di dalamnya yang ingin Anda buat transparan

Jadi dalam artikel ini, saya akan menunjukkan kepada Anda berbagai cara untuk menyesuaikan transparansi sehingga Anda dapat mulai menerapkannya dalam proyek pengkodean Anda

Transparansi Gambar dengan Properti Opasitas CSS

Untuk membuat gambar transparan, Anda dapat menggunakan properti CSS opacity, seperti yang saya sebutkan di atas. Sintaks dasar dari properti opacity ditunjukkan pada cuplikan kode di bawah ini

selector {
          opacity: value;
      }

Properti opacity mengambil nilai dari

<img src="freecodecamp.png" alt="freecodecamp-logo" />

1 hingga

<img src="freecodecamp.png" alt="freecodecamp-logo" />

2, dengan

<img src="freecodecamp.png" alt="freecodecamp-logo" />

3 menjadi nilai default untuk semua elemen. Semakin rendah nilainya, semakin transparan. Jadi jika suatu elemen diberi opasitas

<img src="freecodecamp.png" alt="freecodecamp-logo" />

4, itu tidak akan terlihat

Anda dapat menemukan contoh nilai opasitas yang berbeda dalam cuplikan kode di bawah ini

<img src="freecodecamp.png" alt="freecodecamp-logo" />

_

Saya telah menambahkan beberapa CSS untuk memusatkan semua yang ada di halaman

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

_

Nilai opasitas

<img src="freecodecamp.png" alt="freecodecamp-logo" />

_3 adalah nilai default, jadi gambar akan muncul seperti ini

img {
     opacity: 0.5;
   }

_

Kode ini memberi kita opasitas 50%, dan Anda dapat melihat bahwa logonya sedikit memudar

img {
        opacity: 0;
      }

_

Dengan opasitas

<img src="freecodecamp.png" alt="freecodecamp-logo" />

_4, gambar 100% transparan, sehingga menjadi tidak terlihat

Satu-satunya cara untuk memastikan gambar ada di halaman adalah dengan memeriksanya dengan devtool browser Anda

Anda dapat menggunakan nilai opasitas ini untuk melakukan banyak hal – misalnya, Anda dapat menggunakannya untuk menyertakan teks di atas gambar pahlawan di situs web

Anda mungkin bertanya-tanya mengapa Anda ingin membuat konten tidak terlihat dengan nilai opasitas 0. Yah, ini bisa berguna dalam animasi, dan juga dalam membangun game HTM + CSS + JavaScript

Anda pasti ingin menggunakan pemosisian CSS untuk membantu Anda menyelaraskan berbagai hal. Saya akan membahas ini di bagian artikel selanjutnya

Transparansi Gambar Latar Belakang dalam HTML dan CSS

CSS menawarkan cara untuk menyetel gambar latar belakang untuk elemen penampung dengan properti ________ 1 _______7, jadi Anda tidak perlu melakukannya dengan CSS. Ini berarti Anda juga dapat menempatkan teks di dalam wadah

<div class="showcase">
      <h1>A group of ring-tailed lemurs</h1>
</div>

body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
    }
    .showcase {
      background-image: url("ring-tailed-lemurs.jpeg");
      height: 400px;
      width: 500px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.6;
    }

Kelemahan dari pendekatan ini adalah opacity diatur untuk wadah tempat gambar dan teks berada. Jadi, opacity juga memengaruhi teks, bukan hanya gambar. Ini mungkin bukan yang Anda inginkan

Solusinya

Secara default, saat Anda menerapkan opasitas ke sebuah wadah, keturunannya juga akan mewarisinya

Solusi dalam situasi ini adalah menyetel gambar latar belakang di HTML. Hal ini memudahkan untuk menerapkan opacity hanya pada gambar, daripada menyetel gambar latar belakang untuk wadah di CSS

Kali ini, gambar dan teks akan dipisahkan, sehingga teks tidak akan mewarisi nilai yang ditetapkan untuk opacity

Ini berarti Anda juga harus menggunakan pemosisian CSS untuk menyelaraskan teks di dalam gambar

<div class="showcase">
   <img src="ring-tailed-lemurs.jpeg" alt="lemurs" class="bg-image" />

   <h1 class="bg-img-title">A group of ring-tailed lemurs</h1>
</div>

body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
    }
    .showcase {
      position: relative;
    }

    .bg-image {
      opacity: 0.7;
    }

    .bg-img-title {
      position: absolute;
      top: 420px;
      left: 20px;
    }

Dalam cuplikan kode CSS di atas, saya menggunakan

<img src="freecodecamp.png" alt="freecodecamp-logo" />

9 untuk memusatkan semua yang ada di halaman

Wadah

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

_0 elemen dengan kelas

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

1 diposisikan

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

2, sehingga Anda dapat memposisikan

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

3 teks

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

4 di dalamnya. Ini akan mendorong teks

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

_3 ke sudut kiri atas gambar. Properti

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

6 dan

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

7 kemudian digunakan untuk mendorong teks ke sudut kiri bawah gambar

Jika Anda bertanya-tanya apa itu properti

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

_6 dan

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }


 img {
        opacity: 1;
      }

7, itu adalah properti yang dapat Anda akses saat menggunakan properti tampilan

Selain keduanya, Anda juga mendapatkan akses ke properti

img {
     opacity: 0.5;
   }

0 dan

img {
     opacity: 0.5;
   }

1. Mereka membiarkan Anda memposisikan elemen di mana saja

Pada akhirnya, gambar menjadi buram dan teks tidak terpengaruh

Kesimpulan

Pada artikel ini, Anda mempelajari cara menggunakan properti opacity CSS untuk membuat gambar menjadi transparan

Karena CSS tetap rumit dan agak aneh, ada baiknya menggabungkan properti opacity dengan fitur CSS lainnya seperti pemosisian agar dapat digunakan dengan benar

Selain pemosisian CSS, Anda juga dapat menggunakan properti opacity dengan elemen semu CSS seperti

img {
     opacity: 0.5;
   }

3 dan

img {
     opacity: 0.5;
   }

4, yang merupakan cara hacky dalam melakukan sesuatu

Terima kasih telah membaca, dan terus coding

Kolade Chris

Pengembang web dan penulis teknis yang berfokus pada teknologi frontend

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara menghapus transparansi dalam HTML CSS?

Untuk menyetel opasitas latar belakang, gambar, teks, atau elemen lain, Anda dapat menggunakan properti opasitas CSS . Nilai untuk properti ini berkisar dari 0 hingga 1. Jika Anda menyetel properti ke 0, elemen yang diberi gaya akan sepenuhnya transparan (mis. tak terlihat).

Bagaimana cara membuat latar belakang tidak terlihat di HTML?

Properti opacity mengambil nilai dari 0. 0 sampai 1. 0 , dengan 1 sebagai nilai default untuk semua elemen. Semakin rendah nilainya, semakin transparan. Jadi jika suatu elemen diberi opacity 0 , itu tidak akan terlihat .