Come faccio a creare uno sfondo semi trasparente?

Devo rendere trasparente uno sfondo bianco al 50% senza alterare nient'altro. Come lo faccio?

Utilizzare rgba():

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

Questo ti darà il 50% di opacità mentre il contenuto della scatola continuerà ad avere il 100% di opacità.

Se lo usi opacity:0.5, il contenuto verrà sbiadito e lo sfondo. Quindi non usarlo.

Funziona, ma anche tutti i figli dell'elemento con questa classe diventeranno trasparenti, senza alcun modo di impedirlo.

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

Se vuoi rendere lo sfondo trasparente grigio, prova:

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

Buono a sapersi

Alcuni browser Web hanno difficoltà a rendere il testo con le ombre sopra uno sfondo trasparente. Quindi è possibile utilizzare un'immagine PNG 1x1 semi trasparente come sfondo.

Nota

Ricorda che IE6 non supporta i file PNG.

NON utilizzare un PNG semitrasparente 1x1. Ridimensiona il PNG fino a 10x10, 100x100, ecc. Qualunque cosa abbia senso sulla tua pagina. (Ho usato un PNG 200x200 ed era solo 0,25 kb, quindi non c'è alcuna preoccupazione reale sulla dimensione del file qui.)

Dopo aver visitato questo post, ho creato la mia pagina Web con 3, 1 x 1 PNG con trasparenza variabile.

Dreamweaver CS5 stava tankando. Stavo avendo dei flash back su DOS !!! Apparentemente ogni volta che ho provato a scorrere, inserire testo, praticamente fare qualsiasi cosa, DW stava cercando di ricaricare le aree semitrasparenti 1x1 pixel alla volta ... YIKES!

Il supporto tecnico di Adobe non sapeva nemmeno quale fosse il problema, ma mi ha detto di ricostruire il file (ha funzionato sui loro sistemi, per inciso). È stato solo quando ho caricato il primo PNG trasparente nel file css che il documento è tornato in profondità.

Poi ho trovato un post su un altro sito di aiuto sui PNG che causavano l'arresto anomalo di Dreamweaver. Ridimensiona il tuo PNG; non c'è alcun aspetto negativo nel farlo.

Sebbene datato, nessuna risposta su questo thread può essere utilizzata universalmente. L'uso di rgba per creare maschere di colore trasparenti non spiega esattamente come farlo con le immagini di sfondo.

La mia soluzione funziona con immagini di sfondo o sfondi a colori.

#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 
}

Prova questo:

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