css - texto - ¿Cómo hago un fondo semi transparente?

texto opaco sobre fondo semitransparente con css

Question

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

Answer 1

Aunque está fechado, ninguna de las respuestas 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>

Answer 2

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

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

Answer 3

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

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

Dreamweaver CS5 fue tanking. ¡Estaba teniendo copias de seguridad de DOS! Aparentemente, cada vez que traté de desplazarme, insertar texto y básicamente hacer cualquier cosa, DW intentaba volver a cargar las áreas semi transparentes de 1 a 1 píxel cada 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, funcionó en sus sistemas). Fue solo cuando cargué el primer PNG transparente en el archivo css que el doc se sumergió nuevamente.

Luego encontré una publicación en otro sitio de ayuda sobre PNGs estrellándose Dreamweaver. Calcule su PNG; no hay inconveniente para hacerlo.

Answer 4

Prueba esto:

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

Answer 5

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

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

Answer 6

Bueno saber

Algunos navegadores web tienen dificultades para representar el texto con sombras en la parte superior del fondo transparente. Luego puede usar una imagen PNG semi transparente de 1x1 como fondo.

Nota

Recuerde que IE6 no es compatible con archivos PNG.

Answer 7

Use rgba() :

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

Esto le dará 50% de opacidad mientras que el contenido de la caja continuará teniendo 100% de opacidad.

Si usa opacity:0.5 , el contenido se desvanecerá al igual que el fondo. Por lo tanto, no lo use.

Answer 8

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
}