Como faço para criar um plano de fundo semi transparente?

Preciso tornar um fundo branco 50% transparente sem afetar mais nada. Como eu faço isso?

Use rgba():

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

Isso fornecerá 50% de opacidade, enquanto o conteúdo da caixa continuará com 100% de opacidade.

Se você usar opacity:0.5, o conteúdo ficará esmaecido e o plano de fundo. Portanto, não o use.

Isso funciona, mas todos os filhos do elemento com essa classe também se tornarão transparentes, sem nenhuma maneira de impedir isso.

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

Se você deseja tornar o plano de fundo transparente cinza, pls tente:

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

Bom saber

Alguns navegadores da web têm dificuldade para renderizar texto com sombras sobre o fundo transparente. Em seguida, você pode usar uma imagem PNG 1x1 semi transparente como plano de fundo.

Nota

Lembre-se de que o IE6 não suporta arquivos PNG.

NÃO use um PNG semi-transparente 1x1. Dimensione o PNG até 10x10, 100x100, etc. Tudo o que faz sentido na sua página. (Eu usei um PNG de 200 x 200 e tinha apenas 0,25 kb, então não há nenhuma preocupação real com o tamanho do arquivo aqui.)

Depois de visitar este post, criei minha página da web com 3 PNGs 1x1, com transparência variável.

O Dreamweaver CS5 estava esgotado. Eu estava tendo flash backs para o DOS !!! Aparentemente, toda vez que eu tentava rolar, inserir texto, basicamente fazer qualquer coisa, a DW estava tentando recarregar as áreas semi transparentes 1x1 pixel de cada vez ... YIKES!

O suporte técnico da Adobe nem sabia qual era o problema, mas disse-me para reconstruir o arquivo (aliás, funcionava nos sistemas deles). Foi somente quando carreguei o primeiro PNG transparente no arquivo css que o documento mergulhou fundo novamente.

Em seguida, encontrei uma postagem em outro site de ajuda sobre PNGs travando o Dreamweaver. Dimensione seu PNG; não há desvantagem em fazê-lo.

Embora datado, nenhuma resposta nesse segmento pode ser usada universalmente. Usar o rgba para criar máscaras de cores transparentes - isso não explica exatamente como fazer isso com imagens de fundo.

Minha solução funciona para imagens de fundo ou coloridas.

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

Tente o seguinte:

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