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

2401

¿Es posible, usando solo CSS, hacer que backgroundun elemento sea semitransparente pero que el contenido (texto e imágenes) del elemento sea 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:1es relativo a la opacity:0.6del padre.

7
  • 20
    Lamentablemente no, CSS3 tiene como objetivo solucionar esto con el nuevo módulo de color, le permitiría especificar un valor alfa cada vez que indique un color. w3.org/TR/css3-color 30/04/09 a las 9:34
  • 75
    En realidad, la opacidad de los elementos secundarios se multiplica por la opacidad del elemento principal, no se anula. Entonces, por ejemplo, si la popacidad de la 'fuera .6y la opacidad de la span' fuera, .5entonces la verdadera opacidad del texto en el intervalo sería 0.3. 3 de enero de 2012 a las 4:05
  • 2
    Supongo que sí, pero como el fondo es translúcido, ni siquiera necesitas el filtro / opacidad: codepen.io/anon/pen/ksJug 18/11/2013 a las 13:20
  • 7
    @chharvey, ¿qué se supone que debe suceder si defino opacity:.5para el elemento principal y opacity:2para el elemento secundario? 4 de agosto de 2014 a las 12:28
  • 12
    @Alexander, me alegra que hayas hecho esa pregunta. Matemáticamente, uno sospecharía que el niño volvería a una opacidad de 1. Sin embargo, CSS noopacity:2; es válido . El valor de la opacitypropiedad debe estar dentro del rango inclusivo [0,1]. 5 de agosto de 2014 a las 23:11
2333

Utilice una imagen PNG o SVG semitransparente o utilice CSS:

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

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


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
11
  • 91
    ¿Es posible hacer esto con colores hexadecimales? ¿Te gusta #fff?
    grm
    13/07/11 a las 22:32
  • 41
    @grm: W3C consideró introducir un formato de código hexadecimal #RRGGBBAA, pero decidieron no hacerlo (por varias razones), por lo que no podemos.
    outis
    15/12/12 a las 6:59
  • 101
    @grm con SASS Puedes,background-color: rgba(#000, .5); 30 de mayo de 2013 a las 0:34
  • 2
    Vale la pena señalar que si desea utilizar la transparencia, todos los navegadores que admiten RGBA también son compatibles con HSLA , que es un mapeo de color mucho más intuitivo. IE8 es el único navegador pseudosignificativo que no lo admite, así que, salvo que siga adelante, use HSL (A) para todos los colores.
    iono
    28 de noviembre de 2013 a las 8:17
  • 26
    @outis: Buenas noticias, #RRGGBBAA ahora está en el nivel de color 4 . 26/02/15 a las 19:01
481

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 también usando 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 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 se debe a la transparencia de fondo de CSS sin afectar los elementos secundarios, a través de RGBa y filtros .

Prueba de los resultados de las capturas de pantalla:

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>

Cromo-33 IE11 IE9 IE8

8
  • 5
    Esta publicación muestra cómo hacerlo en IE8: robertnyman.com/2010/01/11/…
    Slapout
    20/08/10 a las 14:20
  • 14
    @philfreo: Si cambia el primer bit del código de Sebastian a "background: rgb (0, 0, 0) transparent;" ahora debería funcionar en IE8. ¡Esto me estaba molestando durante bastante tiempo! 7 feb 2011 a las 23:10
  • filter: progid Funciona muy bien con IE 9. El color es: transparencia, rojo, verde, azul - todos los valores hexadecimales de dos dígitos. 6 de agosto de 2012 a las 9:05
  • background: rgb(0, 0, 0) transparent; no tiene sentido ya que transparentanula el color de reserva ( 0,0,0) y hace que el fondo sea 100% transparente. Nuestro objetivo es la semitransparencia, por lo que, dependiendo de su diseño, el respaldo debe ser un color sólido ( background: rgb(0, 0, 0);) o completamente transparente ( background: transparent;). 6 de febrero de 2013 a las 23:22
  • 1
    @AdrienBe: edité tu respuesta según tus instrucciones. Desafortunadamente, he estado fuera del espacio mental de esta sesión de preguntas y respuestas en particular durante algún tiempo, por lo que no puedo agregar nada a esta conversación en este momento. 27/0214 a las 19:41
115

Esta es la mejor solución que se me ocurrió, NO usar CSS 3. Y funciona muy bien en Firefox, Chrome e Internet Explorer hasta donde puedo ver.

Coloque un recipiente divy dos niños dival 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 posterior usando el índice z.

.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>
3
  • 19
    Dijo "Sin separar el texto y el fondo en dos elementos colocados uno sobre el otro". Gracias de todos modos, esta es una buena solución y es útil, pero en algunos casos querrás que el elemento opaco sea un hijo del semitransparente.
    Rolf
    19/12/10 a las 17:24
  • Respondí prácticamente lo mismo en otra pregunta SO, pero agregué un jsfiddle y pruebas de captura de pantalla (IE7 +), vea aquí si está interesado en stackoverflow.com/a/21984546/759452 25 feb 2014 a las 17:40
  • @Gorkem Pacaci: asegúrese de que las propiedades de opacidad sean "realmente" entre navegadores, puede usar este fragmento de código de CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity 27 feb 2014 a las 13:40
sesenta y cinco

Para un color de fondo semitransparente simple, las soluciones anteriores (imágenes CSS3 o bg) son las mejores opciones. Sin embargo, si desea hacer algo más elegante (por ejemplo, animación, fondos múltiples, etc.), o si no desea confiar en CSS3, puede probar la “técnica del 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 de panel exterior:

  • 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.

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

La principal ventaja que tiene esta técnica sobre otras 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 puede tener el tamaño 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; eres libre de poner realmente cualquier cosa en el elemento posterior y que no afecte el flujo de contenido (si quieres múltiples subcapas de tamaño completo, solo asegúrate de que también tengan la posición: absoluta, ancho / alto: 100%, y arriba / abajo / izquierda / derecha: automático).

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 usar 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 verifiqué, 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á asegurarse de que estén limpios o contenidos de otra manera, o se saldrán del fondo.
  • Los márgenes van en el elemento del panel y el relleno va en el elemento cont. No use lo contrario (márgenes en el 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 bloqueado o bloqueado 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 al usarla en conjunto con display: inline-blocky con ambos autoy widths / min-heights específicos :

.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 usa ampliamente:

captura de pantalla christmas-card-2009.slippyd.com

6
  • ¿En qué situación uno no querría usar CSS3 para esto? 14 de junio de 2015 a las 2:23
  • @ Burkely91 Si puedes hacerlo en CSS3, entonces úsala. Pero el fondo CSS3 no admite todos los tipos de contenido ni la flexibilidad de diseño completa. El ejemplo de sobre / carta anterior sería difícil de lograr con CSS3 debido a los bordes y los rellenos centrales que se repiten independientemente. Además, tenga en cuenta que esta respuesta se escribió originalmente hace 5 años, antes de que se generalizara el soporte de CSS3. 4 de enero de 2016 a las 10:17
  • 2
    @Igor Ivancha Revirtió sus cambios. Lo siento, cambiar la sangría de mi forma preferida (pestañas) a la suya (2 espacios) no está bien. Es posible que tenga una buena razón para utilizar la sangría de 2 espacios en sus proyectos de código cotidianos, pero para la presentación en la web, creo que las pestañas tienen una clara ventaja: la sangría más profunda hace que sea más fácil discernir los niveles de jerarquía, y está lejos Es más fácil convertir pestañas en espacios de manera confiable y, por lo tanto, es una forma más compatible de todos los lectores. 6 de febrero de 2016 a las 11:07
  • @Igor Ivancha Además, parece que ejecutó el código a través de un embellecedor que puso cada selector y propiedad de CSS en su propia línea. Mis ejemplos se escribieron con saltos de línea intencionales y espaciado para agrupar lógicamente piezas que el lector debería entender juntas, por ejemplo, la mayoría de las propiedades width:& height:comparten una línea porque son el mismo tipo de construcción y se entienden mejor como una forma bidimensional, no un par de restricciones unidimensionales. Además, algunas de las líneas tienen una buena cantidad de contenido porque es contenido repetido que no es tan importante para mostrar. 6 de febrero de 2016 a las 11:11
  • @Igor Ivancha La organización lógica, la agrupación y el estilo son extremadamente importantes para escribir código sano y comprensible, al igual que con todo tipo de escritura. Los cambios que realizó fueron el equivalente a ingresar a la publicación de alguien y eliminar todos los saltos de párrafo, y colocar una nueva línea forzada después de cada oración. Si desea ser tan obtusamente pedante en su propio trabajo, está bien, puede hacerlo. Pero, por favor, no reduzca el carácter semántico y la expresión en el trabajo de otras personas. 6 de febrero de 2016 a las 11:15
58

Es mejor usar un semitransparente.png .

Simplemente abra Photoshop , cree una 2x2imagen de píxeles (¡la selección 1x1puede causar un error de Internet Explorer! ), Rellénela con un color verde y establezca la opacidad en la "pestaña Capas" al 60%. Luego guárdelo y conviértalo en una imagen de fondo:

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

Funciona bien, por supuesto, excepto en el 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');
}
0
57

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 hijos:

MANIFESTACIÓN

Producción:

Opacidad de fondo con un pseudoelemento

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>

La compatibilidad con el navegador es Internet Explorer 8 y versiones posteriores.

0
22

El método más sencillo sería utilizar una imagen PNG de fondo semitransparente .

Puede utilizar JavaScript para que funcione en Internet Explorer 6 si es necesario.

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

Aparte de eso, puede simularlo usando dos elementos hermanos uno al lado del otro : haga uno semitransparente , luego coloque absolutamente el otro sobre la parte superior .

2
  • 2
    Todo lo que necesito es un color de fondo simple, ¿qué tamaño de PNG propondría que cree con este color? 1x1 hará que el renderizado haga mucho trabajo, demasiados píxeles hacen que este PNG sea bastante grande (debería tener un tamaño de archivo aceptable ya que está comprimido, pero aún así el renderizado necesita descomprimirlo para usarlo) ... 30/04/09 a las 12:51
  • 3
    Recomendaría algo como 30px x 30px, que usa menos memoria cuando se repite que un 1x1, y aún es lo suficientemente pequeño como para minimizar el uso de ancho de banda.
    Chris
    30/04/09 a las 14:27
21

Este método le permite tener una imagen de fondo 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.

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

Un ejemplo ( violín ) (tenga en cuenta que la DIVclase with dades 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. el 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:beforetiene 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 hacia atrás .fancyBg(use valores de cero o lo que sea más apropiado para sus necesidades).

dieciséis

El problema es que el texto en realidad tiene total opacidad en su ejemplo. Tiene una opacidad total dentro de la petiqueta, pero la petiqueta es simplemente semitransparente.

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

De lo contrario, no será posible.

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

15

Casi todas estas respuestas asumen que el diseñador quiere un fondo de color sólido. Si el diseñador realmente quiere una foto como fondo, la única solución real en este momento es JavaScript, como el complemento jQuery Transify mencionado en otra parte .

¡Lo que tenemos que hacer es unirnos a la discusión del grupo de trabajo de CSS y hacer que nos den un atributo de opacidad de fondo! Debería funcionar de la mano con la función de fondos múltiples.

0
14

Así es como hago esto (puede que no sea óptimo, pero funciona):

Crea el divque quieras que sea semitransparente. Dale una clase / id. Déjelo vacío y ciérrelo. Déle una altura y un ancho establecidos (digamos, 300 píxeles por 300 píxeles). Dale una opacidad de 0.5 o lo que quieras, y un color de fondo.

Luego, directamente debajo de ese div, cree otro div con una clase / id diferente. Crea un párrafo dentro de él, donde colocarás tu texto. Indique la divposición: relativa y superior: -295px(eso es 295 píxeles negativos ). Dale un índice z de 2 para una buena medida, y asegúrate de que su opacidad sea 1. Dale estilo a tu párrafo como quieras, pero asegúrate de que las dimensiones sean menores que las del primero divpara que no se desborde.

Eso es todo. Aquí está el código:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Esto funciona en Safari 2.x, pero no conozco Internet Explorer.

1
  • El elemento extra se puede evitar y en su lugar utilizar un pseudo elemento como :beforeo:after 3 de noviembre de 2013 a las 7:03
12

Aquí hay un complemento de jQuery que se encargará de todo por usted, Transify ( Transify: un complemento de jQuery para aplicar fácilmente transparencia / opacidad al fondo de un elemento ).

Me estaba encontrando con este problema de vez en cuando, así que decidí escribir algo que me hiciera la vida mucho más fácil. El script tiene menos de 2 KB y solo requiere una línea de código para que funcione, y también se encargará de animar la opacidad del fondo si lo desea.

0
10

Hace un tiempo, escribí sobre esto en Transparencia de fondo entre navegadores con CSS .

Curiosamente, Internet Explorer 6 le permitirá hacer que el fondo sea transparente y mantener el texto en la parte superior completamente opaco. Para los otros navegadores, sugiero usar un archivo PNG transparente.

9

Opacidad de fondo, pero no el texto tiene algunas ideas. Utilice una imagen semitransparente o superponga un elemento adicional.

0
9

Si eres un chico de Photoshop , también puedes usar:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

O:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
8

Para hacer que el fondo de un elemento sea semitransparente, pero que el contenido (texto e imágenes) del elemento sea opaco, debe escribir código CSS para esa imagen y debe agregar un atributo llamado opacitycon un valor mínimo.

Por ejemplo,

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

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

3
  • Esta es una forma de hacerlo en los navegadores modernos. Lo combino con los valores rgba como alternativa.
    Trevor
    14/07/2016 a las 14:57
  • Sí correcto. Esta es una de las formas de lidiar con los navegadores modernos. 21/07/2016 a las 13:05
  • ¿Qué quiere decir con "o menos valor será la transparencia" (parece incomprensible)? (Responda editando su respuesta , no aquí en los comentarios, si corresponde). 8 de septiembre de 2019 a las 14:44
7

CSS 3 tiene una solución fácil para su problema. Usar:

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

Aquí, rgbarepresenta el valor rojo, verde, azul y alfa. El valor verde se obtiene debido a 255 y la mitad de la transparencia se obtiene con un valor alfa de 0.5.

0
6

Si está usando Less , puede usar fade(color, 30%).

6

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

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

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


[1] W3Schools: propiedad de color de fondo de CSS

[2] Blog de Norman: Lista de verificación de compatibilidad con navegadores CSS3 (octubre de 2012)

4

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

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

Puede usar CSS puro 3 : rgba(red, green, blue, alpha), donde alphaestá el nivel de transparencia que desea. No es necesario JavaScript o jQuery.

Aquí hay un ejemplo:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
3
<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/ ?

2

Puede hacerlo rgba color codeusando 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>
2

Según mi punto de vista, la mejor manera de usar un color de fondo con opacidad es la siguiente. Si usamos esto, entonces no perderemos opacidad para los otros elementos, como el color de prueba, el borde, etc.

background-color: rgba(71, 158, 0, 0.8);

Usar color de fondo con opacidad

background-color: rgba(R, G, B, Opacity);

Ingrese la descripción de la imagen aquí

1

Existe una solución más sencilla para colocar una superposición sobre una imagen en el mismo div. No es el uso correcto de esta herramienta. Pero funciona como un encanto para hacer esa superposición usando CSS.

Use una sombra insertada como esta:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Eso es todo :)

1

Puede utilizar RGBA (red, green, blue, alpha) en CSS . Algo como esto:

Entonces, simplemente hacer algo como esto funcionará en su caso:

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

span {
  color: white;
}
1

Puede utilizar el valor de opacidad adjunto al valor hexadecimal:

background-color: #11ffeeaa;

En este ejemplo aaestá la opacidad. Una opacidad 00significa transparente y ffsignifica color sólido.

La opacidad es opcional, por lo que puede usar el valor hexadecimal como siempre:

background-color: #11ffee;

También puede utilizar la forma antigua con rgba():

background-color: rgba(117, 190, 218, 0.5);

Y la backgroundtaquigrafía si quieres asegurarte de que el fondo no tenga otros estilos, como imágenes o degradados:

background: #11ffeeaa;

De la especificación de Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
0

Normalmente uso esta clase para mi trabajo. Es bastante bueno.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
0

Me funcionó al usar el formato, #AARRGGBBpor lo que el que me funcionó fue #1C00ff00. Pruébelo, porque lo he visto funcionar para algunos y no para otros. Lo estoy usando en CSS.

0

Esto da el resultado deseado -

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

Configuración de la opacidad del fondo.