¿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

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

@outis: Buenas noticias, #RRGGBBAA ahora está en el nivel de color 4 .

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 etiqueta sea absoluta, cambie el panel de a a a y envuelva todo eso en una 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 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:

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

12

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

Me encontraba con este problema de vez en cuando, así que decidí escribir algo que 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 manejará la animación de la opacidad del fondo si lo desea.

joren
fuente

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

10

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

miedo
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

Si usa Less , puede usarlo fade(color, 30%).

alex
fuente

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);

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

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

Respuestas:

Pruebas de capturas de pantalla de resultados:

O: