html de opacidad - ¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS?





13 Answers

En Firefox 3 y Safari 3, puedes usar RGBA como mencionó Georg Schölly .

Un truco poco conocido es que puede usarlo en Internet Explorer y usar el filtro de degradado.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

El primer número hexadecimal define el valor alfa del color.

Solución completa todos los navegadores:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Esto es de la transparencia de fondo de CSS sin afectar los elementos secundarios, a través de RGBa y filtros .

Capturas de pantalla prueba de resultados:

Esto es cuando se usa el siguiente código:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

background colores transparentes

¿Es posible, usando solo CSS, hacer que el background de un elemento sea semitransparente pero tenga el contenido (texto e imágenes) del elemento opaco?

Me gustaría lograr esto sin tener el texto y el fondo como dos elementos separados.

Al intentar

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Parece que los elementos hijos están sujetos a la opacidad de sus padres, por lo que la opacity:1 es relativa a la opacity:0.6 de los padres.




Para un color de fondo semitransparente simple, las soluciones anteriores (CSS3 o bg images) son las mejores opciones. Sin embargo, si desea hacer algo más sofisticado (por ejemplo, animación, múltiples fondos, etc.), o si no quiere confiar en CSS3, puede probar la "técnica de panel":

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

La técnica funciona mediante el uso de dos "capas" dentro del elemento del panel externo:

  • uno (el "reverso") que se ajusta al tamaño del elemento del panel sin afectar el flujo de contenido,
  • y uno (el "cont") que contiene el contenido y ayuda a determinar el tamaño del panel.

La position: relative en el panel es importante; le dice a la capa posterior que se ajuste al tamaño del panel. (Si necesita que la etiqueta <p> sea ​​absoluta, cambie el panel de <p> a <span> y envuelva todo eso en una etiqueta de posición absoluta <p> ).

La principal ventaja que tiene esta técnica sobre las similares enumeradas anteriormente es que el panel no tiene que tener un tamaño específico; como se codificó anteriormente, se ajustará a todo el ancho (diseño normal de elementos de bloque) y solo tan alto como el contenido. El elemento del panel exterior se puede dimensionar de la forma que desee, siempre que sea rectangular (es decir, el bloque en línea funcionará; la línea en línea simple no lo hará).

Además, te da mucha libertad para el fondo; tiene la libertad de poner realmente cualquier cosa en el elemento posterior y no afectará el flujo de contenido (si desea varias subcapas de tamaño completo, asegúrese de que también tengan la posición: absoluta, ancho / alto: 100%, y arriba / abajo / izquierda / derecha: auto).

Una variación para permitir el ajuste de inserción de fondo (a través de la parte superior / inferior / izquierda / derecha) y / o la fijación de fondo (mediante la eliminación de uno de los pares izquierdo / derecho o superior / inferior) es utilizar el siguiente CSS en su lugar:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Tal como está escrito, esto funciona en Firefox, Safari, Chrome, IE8 + y Opera, aunque IE7 e IE6 requieren CSS y expresiones adicionales, IIRC, y la última vez que lo verifiqué, la segunda variación de CSS no funciona en Opera.

Cosas a tener en cuenta:

  • Los elementos flotantes dentro de la capa de cont. No serán contenidos. Deberá asegurarse de que estén limpios o contenidos, o se deslizarán fuera de la parte inferior.
  • Los márgenes van en el elemento del panel y el relleno va en el elemento cont. No use el opuesto (márgenes en el cont o el relleno en el panel) o descubrirá rarezas como que la página siempre sea un poco más ancha que la ventana del navegador.
  • Como se mencionó, todo tiene que ser un bloque o un bloque en línea. Siéntase libre de usar <div> s en lugar de <span> s para simplificar su CSS.

Una demostración más completa, que muestra la flexibilidad de esta técnica usándola en conjunto con la display: inline-block , y con width auto / width s / min-height específico y auto :

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

Y aquí hay una demostración en vivo de la técnica que se utiliza ampliamente:




Hay un truco para minimizar el marcado: use un pseudo elemento como fondo y puede establecer la opacidad sin afectar el elemento principal y sus elementos secundarios:

DEMO

Salida:

Código relevante:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

El soporte del navegador es Internet Explorer 8 y Internet Explorer 8 posteriores.




Este método le permite tener una imagen en el fondo y no solo un color sólido, y se puede usar para tener transparencia en otros atributos como los bordes. No se requieren imágenes PNG transparentes.

Use :before (o :after ) en CSS y dele el valor de opacidad para dejar el elemento en su opacidad original. Por lo tanto, puede usar: antes para crear un elemento falso y darle el fondo transparente (o bordes) que desee y moverlo detrás del contenido que desea mantener opaco con z-index .

Un ejemplo ( fiddle ) (tenga en cuenta que el DIV con clase dad es solo para proporcionar algo de contexto y contraste con los colores, este elemento adicional en realidad no es necesario, y el rectángulo rojo se mueve un poco hacia abajo y hacia la derecha para dejar visible el fondo detrás del elemento fancyBg ):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

con este CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

En este caso .fancyBg:before tiene las propiedades CSS que desea tener con transparencia (fondo rojo en este ejemplo, pero puede ser una imagen o bordes). Está posicionado como absoluto para moverlo detrás de .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).




El problema es que el texto TIENE realmente una opacidad total en su ejemplo. Tiene una opacidad total dentro de la etiqueta p , pero la etiqueta p es solo semitransparente.

Puede agregar una imagen de fondo PNG semitransparente en lugar de realizarla en CSS, o separar el texto y la división en 2 elementos y mover el texto sobre el cuadro (por ejemplo, margen negativo).

De lo contrario no será posible.

EDITAR:

Al igual que Chris mencionó: si usa un archivo PNG con transparencia, tiene que usar una solución alternativa de JavaScript para que funcione en el molesto Internet Explorer ...







Hace un tiempo, escribí sobre esto en Transparencia de fondo de navegador cruzado con CSS .

Extrañamente, Internet Explorer 6 le permitirá hacer el fondo transparente y mantener el texto en la parte superior totalmente opaco. Para los otros navegadores, sugiero usar un archivo PNG transparente.




color de fondo: rgba (255,0,0,0.5); como se mencionó anteriormente es la mejor respuesta, simplemente poner. Decir que usar CSS3, incluso en 2013, no es simple porque el nivel de soporte de varios navegadores cambia con cada iteración.

Si bien background-color es compatible con todos los navegadores principales (no es nuevo en CSS3) [1], la transparencia alfa puede ser complicada, especialmente con Internet Explorer antes de la versión 9 y con el color del borde en Safari antes de la versión 5.1. [2]

El uso de algo como Compass o SASS puede ayudar realmente a la producción y la compatibilidad entre plataformas.

[1] W3Schools: CSS background-color Property

[2] Blog de Norman: Lista de verificación de soporte del navegador CSS3 (octubre de 2012)




Para que el fondo de un elemento sea semitransparente pero tenga el contenido (texto e imágenes) del elemento opaco. Necesita escribir código css para esa imagen y debe agregar un atributo llamado opacidad con un valor mínimo. p.ej

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// menor el valor más será la transparencia, o el valor menor será la transparencia.




Puede resolver esto para Internet Explorer 8 mediante (ab) usando la sintaxis de degradado. El formato de color es ARGB. Si está utilizando el preprocesador Sass , puede convertir colores utilizando la función incorporada "ie-hex-str ()".

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";



<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?




Puedes usar RGBA (red, green, blue, alpha) en el CSS , algo como esto:

Así que simplemente haz algo como esto que va a funcionar en tu caso:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}



Puedes hacerlo con el rgba color code usando css como este ejemplo que se muestra a continuación.

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>




Related