Bagaimana cara membuat latar belakang semi transparan?

Saya perlu membuat latar belakang putih 50% transparan tanpa mempengaruhi apa pun. Bagaimana saya melakukannya?

Gunakan rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

Ini akan memberi Anda 50% opacity sedangkan konten kotak akan terus memiliki opacity 100%.

Jika Anda menggunakan opacity:0.5, konten akan memudar serta latar belakang. Karenanya jangan menggunakannya.

Ini bekerja, tetapi semua anak-anak dari elemen dengan kelas ini juga akan menjadi transparan, tanpa ada cara untuk mencegahnya.

.css-class-name {
    opacity:0.8;
}

Jika Anda ingin latar belakang transparan berwarna abu-abu, harap coba:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

Senang mendengarnya

Beberapa browser web mengalami kesulitan untuk membuat teks dengan bayangan di atas latar belakang transparan. Kemudian Anda dapat menggunakan gambar PNG semi transparan 1x1 sebagai latar belakang.

Catatan

Ingat bahwa IE6 tidak mendukung file PNG.

JANGAN gunakan PNG semi transparan 1x1. Ukuran PNG hingga 10x10, 100x100, dll. Apa pun yang masuk akal pada halaman Anda. (Saya menggunakan 200x200 PNG dan hanya 0,25 kb, jadi tidak ada masalah nyata pada ukuran file di sini.)

Setelah mengunjungi posting ini, saya membuat halaman web saya dengan PNG 3, 1x1 dengan transparansi yang bervariasi.

Dreamweaver CS5 adalah tanking. Saya mengalami flash back ke DOS !!! Rupanya setiap kali saya mencoba menggulir, menyisipkan teks, pada dasarnya melakukan apa saja, DW mencoba memuat ulang area semi transparan 1x1 piksel sekaligus ... YIKES!

Dukungan teknis Adobe bahkan tidak tahu apa masalahnya, tetapi mengatakan kepada saya untuk membangun kembali file (itu bekerja pada sistem mereka, kebetulan). Hanya ketika saya memuat PNG transparan pertama ke dalam file css, dokter itu menyelam lagi.

Kemudian saya menemukan posting di situs bantuan lain tentang PNG yang menabrak Dreamweaver. Besarkan ukuran PNG Anda; tidak ada kerugian untuk melakukannya.

Meskipun bertanggal, tidak ada satu jawaban pun di utas ini yang dapat digunakan secara universal. Menggunakan rgba untuk membuat topeng warna transparan - itu tidak menjelaskan bagaimana melakukannya dengan gambar latar belakang.

Solusi saya berfungsi untuk gambar latar belakang atau latar belakang warna.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

Coba ini:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}