¿Cómo hago un fondo semi transparente?

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

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

Si desea que el fondo transparente sea gris, intente:

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

NO utilice un PNG semi transparente 1x1. Tamaño del PNG hasta 10x10, 100x100, etc. Lo que tenga sentido en tu página. (Usé un PNG de 200x200 y era solo 0.25 kb, por lo que no hay ninguna preocupación real sobre el tamaño del archivo aquí.)

Después de visitar este post, creé mi página web con 3, 1x1 PNGs con transparencia variable.

Dreamweaver CS5 se estaba hundiendo. ¡Estaba teniendo flash backs para DOS!!! Al parecer, cada vez que trataba de desplazarse, insertar texto, básicamente hacer cualquier cosa, DW estaba tratando de recargar el áreas semi transparentes 1x1 pixel a la vez ... ¡CARAMBA!

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

Luego encontré un post en otro sitio de ayuda sobre PNGs estrellarse Dreamweaver. Aumenta el tamaño de tu PNG; no hay inconveniente en hacerlo.

Es bueno saberlo

Algunos navegadores web tienen dificultades para renderizar texto con sombras sobre fondo transparente. A continuación, puede utilizar una imagen PNG 1x1 semi transparente como fondo.

Nota

Recuerde que IE6 no soporta archivos PNG.

Aunque está fechada, ninguna respuesta en este hilo se puede usar 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); 
}