¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS?
¿Es posible, usando solo CSS, hacer que el background de un elemento semitransparente, pero ¿el contenido (texto e imágenes) del elemento es 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 al opacity:0.6 del padre.
preguntado el 30 de abril de 09 a las 06:04
Stijn Sanders
30 Respuestas
O use un semitransparente PNG imagen o use CSS 3:
background-color: rgba(255, 0, 0, 0.5);
Aquí hay un artículo de css3.info, Opacidad, RGBA y compromiso (2007, 06, 03).
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>Respondido el 08 de Septiembre de 19 a las 15:09
¿Es posible hacer esto con colores hexadecimales? ¿Te gusta #fff? - grm
@grm: W3C consideró introducir un formato de código hexadecimal #RRGGBBAA, pero decidieron no hacerlo (por varias razones), por lo que no podemos. - afueras
Vale la pena señalar que si desea utilizar la transparencia, todos los navegadores compatibles con RGBA también son compatibles con HSLA, que es un mapeo de colores 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. - yo no
@outis: Buenas noticias, #RRGGBBAA ahora está en el nivel de color 4. - BoltClock ♦
En Firefox 3 y Safari 3, puede usar RGBA como Georg Schölly mencionó.
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 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>
contestado el 23 de mayo de 17 a las 12:05
Pero no en IE8. Probé la nueva sintaxis -ms-filter pero todavía no me funcionó :( - filfreo
Esta publicación muestra cómo hacerlo en IE8:robertnyman.com/2010/01/11/… - Bofetada
@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! - 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
@AdrienBe: edité tu respuesta según tus instrucciones. Desafortunadamente, he estado fuera del espacio de cabeza 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. - user664833
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.
Poner un recipiente div y dos hijos divs en el mismo nivel, uno para el contenido, 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>contestado el 31 de mayo de 20 a las 18:05
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
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 stackoverflow.com/a/21984546/759452 - adrien ser
@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 ser
¿Por qué no hacerlo con un pseudo elemento como :after y evitar el marcado adicional? - Y Pescador
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.
LA position: relative en el panel es importante; le dice a la capa trasera que se ajuste al tamaño del panel. (Si necesita el <p> etiqueta para que sea absoluta, cambie el panel de un <p> a una <span> y envolver todo eso en una posición absoluta <p> etiqueta.)
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 en línea simple 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 la posición: absoluta, ancho / alto: 100%, y arriba / abajo / izquierda / derecha: automático).
Una variación para permitir el ajuste de la 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 izquierda / derecha 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 en el elemento cont. No use lo opuesto (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 bloque o bloque en línea. Siéntete 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 usándola en conjunto con display: inline-block, y 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 aqui hay un demo en vivo de la técnica que se utiliza ampliamente:
Respondido 23 Feb 20, 06:02
¿En qué situación no querría uno usar CSS3 para esto? - Burkely91
@ 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. - Slipp D. Thompson
@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 usar 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. - 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 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 width: & height: las propiedades comparten una línea porque son el mismo tipo de construcción y se entienden mejor como una forma bidimensional, no como 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 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 poner 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. - Slipp D. Thompson
Es mejor usar un semitransparente .png.
Solo abre Photoshop, crear un 2x2 imagen de píxelrecolección 1x1 puede causar un error de Internet Explorer.), rellénelo 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 preciosos 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');
}
contestado el 23 de mayo de 17 a las 13:05
Hay un truco para minimizar el marcado: utilice un pseudo elemento como fondo y puede establecer la opacidad sin afectar el elemento principal y sus hijos:
Salida:
Código relevante:
p {
position: relative;
}
p:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .6;
z-index: -1;
}
/*** The following is just for demo styles ***/
body {
background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
background-size: cover;
}
p {
width: 50%;
padding: 1em;
margin: 10% auto;
font-family: arial, serif;
color: #000;
}
img {
display: block;
max-width: 90%;
margin: .6em auto;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>El soporte del navegador es Internet Explorer 8 y después.
Respondido 11 Abr '16, 19:04
El método más sencillo sería utilizar un fondo semitransparente. Imagen PNG.
Puede utilizar JavaScript para que funcione en Internet Explorer 6 si lo necesitas.
Utilizo el método descrito en PNG transparentes en Internet Explorer 6.
Aparte de eso, puedes fingirlo usando dos elementos hermanos uno al lado del otro - hacer uno semitransparente, entonces coloque absolutamente el otro sobre la parte superior.
Respondido el 08 de Septiembre de 19 a las 15:09
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) ... Lijadoras Stijn
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
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.
Utilice la herramienta :before (o :after) en CSS y darles 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 desea 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 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 del fancyBg elemento):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
con este CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
En este caso .fancyBg:before tiene las propiedades CSS que desea tener con transparencia (fondo rojo en este ejemplo, pero puede ser una imagen o bordes). Está posicionado como absoluto para moverlo hacia atrás. .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).
Respondido 06 Feb 16, 11:02
El problema es que el texto en realidad tiene opacidad total en su ejemplo. Tiene total opacidad dentro del p etiqueta, pero la p La etiqueta 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 ...
Respondido el 08 de Septiembre de 19 a las 15:09
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 otro lugar.
¡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.
contestado el 23 de mayo de 17 a las 13:05
Así es como hago esto (puede que no sea óptimo, pero funciona):
Crea el div que quieres ser semitransparente. Dale una clase / id. Dejalo vacíoy 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.
Entonces, directamente debajo ese div, crea otro div con una clase / id diferente. Crea un párrafo dentro de él, donde colocarás tu texto. Dar el div posición: relativa y superior: -295px (eso es negativas 295 píxeles). 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. div para 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>Esto funciona en Safari 2.x, pero no conozco Internet Explorer.
Respondido el 08 de Septiembre de 19 a las 15:09
El elemento adicional se puede evitar y en su lugar utilizar un pseudo elemento como :before or :after - Frozenkoi
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 encontraba 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.
Respondido el 08 de Septiembre de 19 a las 15:09
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.
contestado el 25 de mayo de 11 a las 12:05
Opacidad del fondo, pero no del texto tiene algunas ideas. Utilice una imagen semitransparente o superponga un elemento adicional.
contestado el 23 de mayo de 17 a las 11:05
Si eres un Photoshop chico, 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**
}
Respondido 11 Abr '16, 19:04
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 opacity con 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.
Respondido el 08 de Septiembre de 19 a las 15:09
Esta es una forma de hacerlo en los navegadores modernos. Lo combino con los valores rgba como alternativa - Tahir Jalid
Sí correcto. Esta es una de las formas de lidiar con los navegadores modernos. - empujar singh
Que quieres decir con "O el valor menor será la transparencia" (parece incomprensible)? (Responder por editando tu respuesta, no aquí en los comentarios, si corresponde.) - Pedro Mortensen
CSS 3 tiene una solución fácil para su problema. Usar:
background-color:rgba(0, 255, 0, 0.5);
Aquí, rgba representa 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.
Respondido el 08 de Septiembre de 19 a las 15:09
¿En qué se diferencia esto de algunas respuestas anteriores? - Pedro Mortensen
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.
Aunque la background-color es 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]
Usando algo como Compass or SASS realmente puede ayudar a la producción y la compatibilidad multiplataforma.
[ 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)
Respondido el 20 de junio de 20 a las 10:06
Puedes resolver esto por Internet Explorer 8 por (ab) usando la sintaxis de degradado. El formato de color es ARGB. Si está utilizando el Hablar con descaro a preprocesador 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')";
Respondido 11 Abr '16, 19:04
<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>
respondido 18 nov., 14:11
Puedes hacerlo con rgba color code usando CSS como este ejemplo que se muestra a continuación.
.imgbox img{
height: 100px;
width: 200px;
position: relative;
}
.overlay{
background: rgba(74, 19, 61, 0.4);
color: #FFF;
text-shadow: 0px 2px 5px #000079;
height: 100px;
width: 300px;
position: absolute;
top: 10%;
left: 25%;
padding: 25px;
}<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
<div class="overlay">
<p>This is Simple Text.</p>
</div>
</div>Respondido el 08 de Septiembre de 19 a las 17:09
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);
Usar color de fondo con opacidad
background-color: rgba(R, G, B, Opacity);
Respondido el 08 de Septiembre de 19 a las 17:09
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 :)
Respondido 11 Abr '16, 20:04
Puedes usar RGBA (red, green, blue, alpha) en el capítulo respecto a la CO. 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;
}
Respondido el 08 de Septiembre de 19 a las 17:09
Puede utilizar el valor de opacidad adjunto al valor hexadecimal:
background-color: #11ffeeaa;
En este ejemplo aa es la opacidad. Una opacidad de 00 significa transparente y ff significa 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);
En los background taquigrafí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;
Respondido 21 Abr '20, 14:04
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 */
}Respondido el 08 de Septiembre de 19 a las 17:09
Me funcionó al usar el formato #AARRGGBB así que el que trabajaba para mí era #1C00ff00. Pruébelo, porque lo he visto funcionar para algunos y no para otros. Lo estoy usando en CSS.
respondido 12 mar '20, 08:03
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.
Respondido 22 ago 20, 18:08
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css opacity or haz tu propia pregunta.
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 - meandmycode
En realidad, la opacidad de los elementos secundarios es multiplicado por la opacidad del elemento padre, no anulado. Entonces, por ejemplo, si el
pla opacidad eran.6yspanla opacidad eran.5entonces la verdadera opacidad del texto en el intervalo sería0.3. - chharveySupongo que sí, pero como el fondo es translúcido, ni siquiera necesitas el filtro / opacidad: codepen.io/anon/pen/ksJug - Stijn Sanders
@chharvey lo que se supone que debe suceder si defino
opacity:.5para el padre yopacity:2para el elemento hijo? - Alexander@Alexander, me alegra que hayas hecho esa pregunta. Matemáticamente, uno sospecharía que el niño volvería a tener una opacidad de 1. Sin embargo,
opacity:2;is CSS inválido. El valor de laopacityperfecta debe: estar dentro del rango inclusivo [0,1]. - chharvey