¿Cómo hago un fondo semitransparente?

Necesito hacer un fondo blanco 50% transparente sin afectar nada más. ¿Cómo lo hago?

Uso rgba():

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

Esto le dará un 50% de opacidad, mientras que el contenido del cuadro seguirá teniendo un 100% de opacidad.

Si lo usa opacity:0.5, el contenido se desvanecerá, así como el fondo. Por lo tanto, no lo use.

Esto funciona, pero todos los elementos secundarios del elemento con esta clase también se volverán transparentes, sin ninguna forma de evitarlo.

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

Si desea que el fondo transparente sea gris, por favor intente:

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

Bueno saber

Algunos navegadores web tienen dificultades para representar texto con sombras sobre fondo transparente. Luego puede usar una imagen PNG semitransparente 1x1 como fondo.

Nota

Recuerde que IE6 no admite archivos PNG.

NO use un PNG semitransparente 1x1. Tamaño de PNG hasta 10x10, 100x100, etc. Lo que tenga sentido en su página. (Utilicé un PNG de 200x200 y tenía solo 0.25 kb, por lo que no hay una preocupación real sobre el tamaño del archivo aquí).

Después de visitar esta publicación, creé mi página web con 3 PNGs 1x1 con transparencia variable.

Dreamweaver CS5 se estaba hundiendo. Estaba teniendo flash backs a DOS !!! Aparentemente, cada vez que intentaba desplazarme, insertar texto, básicamente hacer cualquier cosa, DW intentaba recargar las áreas semitransparentes 1x1 píxel a la vez ... ¡YIKES!

El soporte técnico de Adobe ni siquiera sabía cuál era el problema, pero me dijo que reconstruyera el archivo (por cierto, funcionaba en sus sistemas). Fue solo cuando cargué el primer PNG transparente en el archivo css que el documento se sumergió nuevamente.

Luego encontré una publicación en otro sitio de ayuda sobre PNG que bloquea Dreamweaver. Dimensione su PNG; no hay inconveniente en hacerlo.

Aunque anticuado, ninguna respuesta en este hilo puede usarse universalmente. Usar rgba para crear máscaras de color transparentes, eso no explica exactamente cómo hacerlo con imágenes de fondo.

Mi solución funciona para imágenes de fondo o fondos de color.

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

Prueba esto:

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