Bagaimana cara membuat gambar transparan di html?

Question

Tidak ada properti yang sama dengan transparansi di CSS. Namun, Anda dapat membuat efek transparansi dengan menggunakan properti opasitas CSS3

Table of Contents Show

Contoh membuat gambar latar belakang dengan kotak teks transparan
Bekerja dengan PNG saja
Butuh bantuan?
Transparansi Gambar dengan Properti Opasitas CSS
Transparansi Gambar Latar Belakang dalam HTML dan CSS
Bisakah kita membuat gambar transparan dalam HTML?
Bagaimana cara membuat PNG transparan dalam HTML?
Bagaimana cara menghapus latar belakang gambar dalam HTML?
Bagaimana cara mengubah gambar menjadi transparansi?

Properti opacity menentukan transparansi gambar atau teks. Angka berkisar antara 0 dan 1. Nilai 1 adalah nilai default dan membuat elemen sepenuhnya buram. Nilai 0 membuat elemen sepenuhnya transparan. Nilai antara 0 dan 1 secara bertahap membuat suatu elemen menjadi jelas

Untuk membuat gambar transparan sederhana, Anda perlu menyetel opacity untuk

Gambar asli

Di sini lihat contoh di mana gambar di latar belakang transparan karena opacity. 0. 5



  
    Title of the document

Sekarang, mari kita lihat contoh di mana kotak transparan, dengan teks di dalamnya, dibuat pada gambar latar belakang. Buat kotak menggunakan

beri tag dan tambahkan properti padding-top dan text-align untuk meletakkan kotak di tengah latar belakang Anda. Kemudian, atur opacity untuk kotak Anda

Contoh membuat gambar latar belakang dengan kotak teks transparan



  
    Title of the document

_

Dalam contoh kami berikutnya, kami menggunakan. setelah elemen semu, yang ditambahkan ke kelas "kotak".



  
    Title of the document
    
  
  
    
      
This is a some text.

Sekarang, mari pertimbangkan kasus lain ketika efek opacity menghilang saat melayang. Di sini, properti opacity digunakan dengan the. hover pemilih untuk mengubah opacity pada mouse-over

Untuk merender gambar dengan latar belakang transparan, sertakan yang berikut ini di CSS Anda saat membuat gambar

body { 
  background-color: transparent;
}

Contoh

Gambar ini memiliki background-color: transparent; disetel pada body

Cobalah sendiri

Gambar URL

Saat membuat gambar dari URL. Lewati CSS yang sama di param CSS dan latar belakang akan dibuat transparan

Bekerja dengan PNG saja

Transparansi hanya didukung oleh format file PNG. Secara default, semua gambar dirender sebagai PNG. Jika Anda merender gambar sebagai JPG atau Webp, latar belakangnya akan berwarna putih

Butuh bantuan?

Bicaralah dengan manusia. support@htmlcsstoimage. com. Kami selalu merespon dalam waktu 24 jam. Dan seringkali, bahkan lebih cepat

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 default, sehingga gambar 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 _____ 5 _____ 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 pojok 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

Bisakah kita membuat gambar transparan dalam HTML?

First, we create a

element (class="background") with a background image, and a border. Then we create another

(class="transbox") inside the first

. The

have a background color, and a border - the div is transparent.

Bagaimana cara membuat PNG transparan dalam HTML?

Transparansi tidak dilakukan dalam HTML, tetapi merupakan bagian dari gambar itu sendiri. Browser akan melihat gambar sebagai PNG dan menampilkannya sebagai PNG secara otomatis. Untuk menambahkan transparansi pada gambar, Anda harus mengedit file dengan editor grafis seperti Photoshop . Simpan jawaban ini.