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

2283

¿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 intentarlo:

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>
Expandir fragmento

Parece que los elementos secundarios están sujetos a la opacidad de sus padres, por lo que opacity:1es relativo al opacity:0.6del padre.

html  css  opacity 
— Stijn Sanders
fuente
16
Lamentablemente no, CSS3 apunta a solucionar esto con el nuevo módulo de color, le permitiría especificar un valor alfa cada vez que establezca un color. w3.org/TR/css3-color
— meandmycode
71
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 'fuera .6y la spanopacidad de' fuera .5entonces, la verdadera opacidad del texto en el lapso sería 0.3.
— chharvey
1
Supongo que sí, pero dado que el fondo es translúcido, ni siquiera necesita el filtro / opacidad: codepen.io/anon/pen/ksJug
— Stijn Sanders
55
@chharvey, ¿qué se supone que sucederá si defino opacity:.5para el elemento primario y opacity:2para el elemento secundario?
— Alexander
10
@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, opacity:2;es CSS no válido . El valor de la opacitypropiedad debe estar dentro del rango inclusivo [0,1].
— chharvey

Respuestas:

2276

Use una imagen PNG semitransparente o use CSS 3:

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

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

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Expandir fragmento

— Peter Mortensen
fuente
86
¿Es posible hacer esto con colores hexadecimales? ¿Te gusta #fff?
— grm
35
@grm: W3C consideró introducir un formato de código hexadecimal #RRGGBBAA, pero decidieron no hacerlo (por varias razones), por lo que no podemos.
— outis
95
@grm con SASS Puedes,background-color: rgba(#000, .5);
— Jürgen Paul
2
Vale la pena señalar que si desea utilizar la transparencia, todos los navegadores que admiten RGBA también admiten HSLA , que es una asignación de color mucho más intuitiva. IE8 es el único navegador pseudo-significativo que no lo admite, por lo que, salvo eso, use HSL (A) para cada color.
— iono
19
— BoltClock
476

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

Un truco poco conocido es que también puedes usarlo en Internet Explorer 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 es desde la transparencia de fondo CSS sin afectar los elementos secundarios, a través de RGBa y filtros .

Pruebas de capturas de pantalla 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

— Adrien Be
fuente
1
Pero no en IE8. Probé la nueva sintaxis de -ms-filter pero todavía no funcionó para mí :(
— philfreo
55
Esta publicación muestra cómo hacerlo en IE8: robertnyman.com/2010/01/11/…
— Slapout
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 por bastante tiempo!
— Tom Chantler
filter: progid Funciona muy bien con IE 9. el color es: transparencia, rojo, verde, azul: todos los valores hexadecimales de dos dígitos.
— Thorsten Niehues
1
@AdrienBe: edité tu respuesta según tus instrucciones. Desafortunadamente, he estado fuera del espacio de cabeza de este Q&A particular por algún tiempo, por lo que no puedo agregar a esta conversación en este momento.
— user664833
108

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

Coloque un contenedor divy dos niños diven el mismo nivel, uno para el contenido y otro para el fondo. Y usando CSS, ajuste el tamaño del fondo automáticamente para que se ajuste al contenido y coloque el fondo realmente 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>
Expandir fragmento

— Gorkem Pacaci
fuente
19
Él dijo "Sin separar el texto y el fondo en dos elementos colocados uno encima del 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 hijo del semitransparente.
— Rolf
Respondí casi lo mismo en otra pregunta de SO pero agregué un jsfiddle y pruebas de captura de pantalla (IE7 +), vea aquí si está interesado stackoverflow.com/a/21984546/759452
— Adrien Be
@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
— Adrien Be
¿Por qué no hacerlo con un pseudo elemento como :aftery evitar el marcado adicional?
— AndFisher
64

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, múltiples fondos, etc.), o si no desea 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.

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

La principal ventaja de esta técnica sobre las similares enumeradas anteriormente es que el panel no tiene que ser de 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 externo se puede dimensionar de la forma que desee, siempre que sea rectangular (es decir, el bloque en línea funcionará; en línea no funcionará).

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 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 fijación de fondo (mediante la eliminación de uno de los pares izquierdo / derecho o superior / inferior) es utilizar el siguiente CSS:

.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 lo 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. Tendrás que asegurarte de que estén despejados o contenidos, o se deslizarán del fondo.
  • Los márgenes van en el elemento del panel y el relleno va en el elemento cont. No utilice lo contrario (márgenes en el cont o relleno en el panel) o descubrirá rarezas como que la página siempre es ligeramente 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, que muestra la flexibilidad de esta técnica al usarla en conjunto con display: inline-block, y con ambos auto/ widths específicos min-height:

.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>
Expandir fragmento

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

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

— Slipp D. Thompson
fuente
¿En qué situación uno no querría usar CSS3 para esto?
— Burkely91
@ Burkely91 Si puedes hacerlo en CSS3, entonces úsalo absolutamente. Pero el fondo CSS3 no admite todos los tipos de contenido ni la flexibilidad de diseño completo. El ejemplo de sobre / letra anterior sería difícil de lograr con CSS3 debido a los bordes que se repiten independientemente y los rellenos centrales. Además, tenga en cuenta que esta respuesta se escribió originalmente hace 5 años, antes de que el soporte CSS3 fuera generalizado.
— Slipp D. Thompson
2
@Igor Ivancha hizo retroceder sus cambios. Lo siento, cambiar la sangría de mi forma preferida (pestañas) a la tuya (2 espacios) no es genial. Es posible que tenga una buena razón para usar sangría de 2 espacios en sus proyectos de código del día a día, pero para su presentación en la web, creo que las pestañas tienen una clara victoria: 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 de manera confiable las pestañas en espacios, por lo que es una forma más compatible de todos los lectores.
— Slipp D. Thompson
@Igor Ivancha Además, parece que ejecutó el código a través de un embellecedor que puso cada selector y propiedad CSS en su propia línea. Mis ejemplos fueron escritos con saltos de línea intencionales y el espaciamiento de piezas de grupo lógicamente que deben ser entendidos juntos por el lector- por ejemplo, la mayoría de width:y height:propiedades compartir una línea porque son el mismo tipo de construcción y mejor entendida como una forma de 2 dimensiones, 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.
— Slipp D. Thompson
@Igor Ivancha La organización lógica, la agrupación y el estilo son extremadamente importantes para escribir un código sensato y comprensible, como lo es para todo tipo de escritura. Los cambios que realizó fueron el equivalente a ingresar a 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 pedante en su propio trabajo, está bien, puede hacerlo. Pero, por favor, no rebajes el carácter semántico y la expresión en el trabajo de otras personas.
— Slipp D. Thompson
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! ), Complétela con un color verde y configure 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');
}
— Comunidad
fuente
54

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

MANIFESTACIÓN

Salida:

Opacidad de fondo con un pseudo elemento

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>
Expandir fragmento

El soporte del navegador es Internet Explorer 8 y posterior.

— web-tiki
fuente
23

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

Puede usar 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, podría simularlo utilizando dos elementos hermanos uno al lado del otro : haga uno semitransparente y luego coloque absolutamente el otro sobre la parte superior .

— Chris
fuente
2
Todo lo que necesito es un color de fondo simple, ¿qué tamaño de PNG me propondrías crear 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 correcto desde que está comprimido, pero aún así el renderizado debe descomprimirlo para usarlo) ...
— Stijn Sanders
3
Recomiendo algo como 30px x 30px, que usa menos memoria cuando se repite que un 1x1, y todavía es lo suficientemente pequeño como para minimizar el uso de ancho de banda.
— Chris
21

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

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: 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 opaco z-index.

Un ejemplo ( violín ) (tenga en cuenta que la DIVclase with dades solo para proporcionar un poco 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 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). Se posiciona como absoluto para moverlo hacia atrás .fancyBg(use valores de cero o lo que sea más apropiado para sus necesidades).

— frozenkoi
fuente
17

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

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

De lo contrario, no será posible.

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

— SvenFinke
fuente
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 debemos hacer es unirnos al debate del grupo de trabajo 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.

— Thinsoldier
fuente
14

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

Cree el divque desea que sea semitransparente. Dale una clase / id. Déjalo vacío y ciérralo. Déle una altura y un ancho establecidos (por ejemplo, 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 ). Dele un índice z de 2 para una buena medida, y asegúrese de que su opacidad sea 1. Diseñe su párrafo como desee, pero asegúrese de que las dimensiones sean menores que las del primero divpara que no se desborde.

Eso es. 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>
Expandir fragmento

Esto funciona en Safari 2.x, pero no sé acerca de Internet Explorer.

— paris ionescu
fuente
El elemento extra se puede evitar y en su lugar se usa un pseudo elemento como :beforeo:after
— frozenkoi
11

Hace un tiempo, escribí sobre esto en Cross Browser Background Transparency With CSS .

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

— philnash
fuente
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**
}
— suraj rawat
fuente
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 el 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 menos será la transparencia.

— Pushp Singh
fuente
Esta es una forma de hacerlo en los navegadores modernos. Lo combino con los valores rgba como alternativa
— Tahir Khalid
Sí correcto. Esta es una de las formas de lidiar con el navegador moderno.
— Pushp Singh
¿Qué quiere decir con "o el valor menos será transparencia" (parece incomprensible)? (Responda editando su respuesta , no aquí en comentarios, si corresponde)
— Peter Mortensen,
7

CSS 3 tiene una solución fácil a su problema. Utilizar:

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

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

— Touhid Rahman
fuente
¿Cómo es esto diferente de algunas respuestas anteriores?
— Peter Mortensen
6

color de fondo: rgba (255, 0, 0, 0.5); como se mencionó anteriormente es la mejor respuesta simplemente. Decir que usar 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 principales navegadores (no es nuevo en CSS 3) [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]

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

[1] W3Schools: propiedad de color de fondo CSS

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

— Will Nielsen
fuente
4

Puede resolver esto para Internet Explorer 8 (ab) utilizando 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')";
— Henrik
fuente
4

Puede usar CSS 3 puro : rgba(red, green, blue, alpha)dónde alphaestá el nivel de transparencia que desea. No hay necesidad de JavaScript o jQuery.

Aquí hay un ejemplo:

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

— premgowda
fuente
2

Puede hacerlo rgba color codeutilizando 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>
Expandir fragmento

— Rudra
fuente
1

Hay una solución más fácil para colocar una superposición sobre una imagen en el mismo div. No es el uso correcto de esta herramienta. Pero funciona de maravilla 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 :)

— edd2110
fuente
1

Puede usar RGBA (red, green, blue, alpha) en el 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;
}
— Alireza
fuente
1

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

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

Usa el color de fondo con opacidad

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

Ingrese la descripción de la imagen aquí

— Vinod Kumar
fuente
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 */
}
Expandir fragmento

— Cengkuru Michael
fuente
0

Funcionó para mí cuando se utiliza el formato #AARRGGBBasí que el trabajo para mí era #1C00ff00. Pruébalo, porque lo he visto funcionar para algunos y no para otros. Lo estoy usando en CSS.

— Donald Shahini
fuente
0

Puede usar el valor de opacidad agregado al valor hexadecimal:

background-color: #11ffeeaa;

En este ejemplo aaes la opacidad. Una opacidad de 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 usar el método antiguo con rgba():

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

Y la backgroundtaquigrafía si desea asegurarse 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;
— AMS777
fuente
-2

Puede usar el color RGB con opacidad como un código de color en RGB (63, 245, 0) y agregar opacidad (como 63, 245, 0, 0.5) y también reemplazar RGB con RGBA. Adebe usarse para opacidad.

div {
  background: rgba(63, 245, 0, 0.5);
}
Expandir fragmento

— Vijay Sharma
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.