Pregunta ¿Cómo doy texto o una imagen con un fondo transparente usando CSS?


¿Es posible, usando solo CSS, hacer el background de un elemento semitransparente pero tiene 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 secundarios están sujetos a la opacidad de sus padres, por lo que opacity:1 es relativo a la opacity:0.6 del padre


1997
2018-04-30 09:00


origen

Respuestas:

O usa un semitransparente PNG imagen o use CSS3:

background-color:rgba(255,0,0,0.5);

Aquí hay un artículo de css3.info, Opacidad, RGBA y compromiso (2007-06-03).


2115
2017-07-13 20:51


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

Un truco poco conocido es que también puedes usarlo en Internet Explorer usando el filtro de gradiente.

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 para 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 Transparencia de fondo CSS sin afectar los elementos secundarios, a través de RGBa y filtros.

Capturas de pantalla de 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>

Chrome-33 IE11 IE9 IE8


456
2018-04-30 20:42


Esta es la mejor solución que pude encontrar, NO uso CSS 3. Y funciona muy bien en Firefox, Chrome e Internet Explorer por lo que puedo ver.

Ponga un contenedor DIV y dos DIV secundarios en el mismo nivel, uno para el contenido y otro para el fondo. Y usando CSS, ajuste automáticamente el tamaño del fondo para que se ajuste al contenido y coloque el fondo en la parte de atrás usando z-index.

    .container {
      position: relative;
    }
    .content {
      position: relative;
      color: White;
      z-index: 5;
    }
    .background {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: Black;
      z-index: 1;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>


97
2018-05-24 16:07


Es mejor usar un semitransparente .png.

Solo abre Photoshop, crear un 2x2 imagen de píxel (cosecha 1x1 puede causar un error de Internet Explorer!), llénelo de color verde y establezca la opacidad en "Pestaña Capas" al 60%. Luego guárdalo y haz que sea una imagen de fondo:

<p style="background: url(green.png);">any text</p>

Funciona genial, por supuesto, excepto en encantador Internet Explorer 6. Hay mejores soluciones disponibles, pero aquí hay un truco rápido:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

54
2017-10-05 08:15


Para un color de fondo semitransparente simple, las soluciones anteriores (imágenes CSS3 o bg) son las mejores opciones. Sin embargo, si quieres hacer algo más elegante (por ejemplo, animación, fondos múltiples, etc.), o si no quieres confiar en CSS3, puedes 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 al usar dos "capas" dentro del elemento del panel exterior:

  • uno (el "respaldo") 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.

los position: relative en el panel es importante; le dice a la capa que se ajuste al tamaño del panel. (Si necesita el <p> etiqueta para ser absoluta, cambie el panel de un <p> a un <span> y envolver todo eso en una posición absolutamente <p> etiqueta.)

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

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

Una variación para permitir el ajuste de fondo de fondo (a través de arriba / abajo / izquierda / derecha) y / o fijación de fondo (eliminando uno de los pares izquierda / derecha o arriba / abajo) es usar el siguiente CSS en su lugar:

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

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 revisé, la segunda variación de CSS no funciona en Opera.

Cosas a tener en cuenta:

  • Los elementos flotantes dentro de la capa cont no estarán contenidos. Deberás asegurarte de que estén limpios o bien contenidos, o se saldrán del fondo.
  • Los márgenes van al elemento del panel y el relleno va al elemento cont. No utilice el opuesto (márgenes en la cont o relleno en el panel) o descubrirá rarezas como que la página siempre es un poco más ancha que la ventana del navegador.
  • Como se mencionó, todo debe ser bloque o 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, mostrando la flexibilidad de esta técnica al usarla en tándem con display: inline-blocky con ambos auto y específico widths /min-heights:

.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 un demo en vivo de la técnica que se usa ampliamente:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11


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:

MANIFESTACIÓN

Salida:

Background opacity with a pseudo element

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 después.


47
2018-01-14 00:14


El método más fácil sería usar un fondo semitransparente Imagen PNG.

Puedes usar JavaScript para que funcione en Internet Explorer 6 si lo necesitas.

Yo uso el método descrito en PNG transparentes en Internet Explorer 6.

Aparte de eso,

podrías fingir usando two side-by-side sibling elements - hacer uno semitransparente, entonces absolutely position the other over the top?


23
2018-04-30 09:14


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

Utilizar :before (o :after) en CSS y darles el valor de opacidad para dejar el elemento en su opacidad original. Por lo tanto, puede usar: antes para hacer 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 (violín) (tenga en cuenta que el DIV con clase dad es solo para proporcionar un cierto contexto y contraste a los colores, este elemento extra 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 fancyBgelemento):

<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 de 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 .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).


20
2018-01-26 16:36


Preguntas populares

InflateException: archivo XML binario línea n. ° 1: error al inflar la clase causado por OutOfMemoryError ¿Qué es AbstractTestNGSpringContextTests? ¿Cuál es la diferencia entre la cola principal de GCD y el hilo principal? Uso de PIL para girar automáticamente la imagen tomada con el teléfono celular y el acelerador Ajustar el ancho a la mitad de la pantalla Error de Google App Engine: INVALID_ARGUMENT: se superaron las siguientes cuotas: BACKEND_SERVICES (quota: 5, used: 5 + needed 1) ¿No ignorar un archivo en un subdirectorio?
licensed under cc by-sa 3.0 with attribution.
Política de privacidad Contactos