¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Es posible, usando sólo 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.
Solución
Utilice una imagen semitransparente PNG o utilice CSS3:
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>
Otros consejos
En Firefox 3 y Safari 3, puede usar RGBA como Georg Sch & # 246; lly mencionó .
Un truco poco conocido es que puedes usarlo en Internet & nbsp; Explorer también usando el filtro de gradiente.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
El primer número hexadecimal define el valor alfa del color.
Solución completa para todos los navegadores:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Esto es de transparencia de fondo CSS sin afectar elementos secundarios, a través de RGBa y filtros .
Prueba de resultados de 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>
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 DIV y dos DIV secundarios en el mismo nivel, uno para contenido y otro para fondo. Y utilizando CSS, ajuste automáticamente el tamaño del fondo para que se ajuste al contenido y coloque el fondo en la parte posterior utilizando 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>
Para un color de fondo semitransparente simple, las soluciones anteriores (CSS3 o imágenes bg) son las mejores opciones.Sin embargo, si quieres hacer algo más sofisticado (p. ej.animación, múltiples fondos, etc.), o si no quieres depender de CSS3, puedes 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 utilizando dos "capas" dentro del elemento del panel exterior:
- uno (el "posterior") 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: relative en el panel es importante;le indica a la capa posterior que se ajuste al tamaño del panel.(Si necesita el <p> etiqueta para que sea absoluta, cambie el panel de un <p> a un <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 sólo a la altura del 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 viejo en línea no lo hará).
Además, te da mucha libertad para el fondo;eres libre de poner cualquier cosa en el elemento posterior y hacer 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:absoluto, 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 arriba/abajo/izquierda/derecha) y/o fijación de fondo (mediante la eliminación de uno de los pares izquierda/derecha o superior/abajo) es usar el siguiente CSS en su lugar:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
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 lo verifiqué, la segunda variación de CSS no funciona en Opera.
Cosas a tener en cuenta:
- Los elementos flotantes dentro de la capa de continuación 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 utilice lo contrario (márgenes en la continuación o relleno en el panel) o descubrirá rarezas como que la página siempre será un poco más ancha que la ventana del navegador.
- Como se mencionó, todo debe ser en bloque o 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, que muestra la flexibilidad de esta técnica al usarla en conjunto con display: inline-block, y con ambos auto & específico widths/min-heights:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>Y aquí hay un demo en vivo de la técnica que se utiliza ampliamente:
Es mejor usar un .png semitransparente.
Simplemente abra Photoshop , cree una imagen de 2x2 píxeles ( elegir 1x1 puede causar un error de Internet & nbsp; Explorer! ), llénalo con un color verde y establece la opacidad en " Pestaña de capas " al 60%. Luego guárdelo y conviértalo en una imagen de fondo:
<p style="background: url(green.png);">any text</p>
Funciona genial, por supuesto, excepto en Internet & nbsp; Explorer & nbsp; 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');
}
Hay un truco para minimizar el marcado: use un pseudo elemento como fondo y puede establecer la opacidad sin afectar el elemento principal y sus elementos secundarios:
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 & nbsp; Explorer & nbsp; 8 y posterior .
El método más fácil sería usar 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,
puede simularlo usando two side-by-side sibling elements - haga uno semitransparente , luego absolutely position the other over the top?
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 que desea mantener opaco con z-index.
Un ejemplo ( fiddle ) (tenga en cuenta que el DIV con clase dad es solo para proporcionar algo de contexto y contraste a los colores, este elemento adicional no es realmente necesario, y el rectángulo rojo se mueve un poco hacia abajo y hacia la derecha para dejar visible el fondo detrás del elemento fancyBg):
<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). Se posiciona como absoluto para moverlo detrás de .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).
El problema es que el texto en realidad TIENE opacidad total en su ejemplo. Tiene opacidad total dentro de la etiqueta p, pero la etiqueta <=> es solo semitransparente.
Puede agregar una imagen de fondo PNG semitransparente en lugar de realizarla en CSS, o separar texto y dividir en 2 elementos y mover el texto sobre el cuadro (por ejemplo, margen negativo).
De lo contrario, no será posible.
EDITAR:
Al igual que Chris mencionó: si usa un archivo PNG con transparencia, debe usar una solución alternativa de JavaScript para que funcione en el molesto Internet Explorer ...
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 debemos hacer es unirnos a la discusión 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.
Así es como hago esto (puede que no sea óptimo, pero funciona):
Cree el div que desea que sea semitransparente. Dale una clase / id. Déjelo VACÍO y ciérrelo. 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, crea otro div con una clase / id diferente. Crea un párrafo dentro de él, donde colocarás tu texto. Indique la posición -295px: relativa y superior: <=> (eso es NEGATIVO 295 píxeles). 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 primer <=> para 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, no sé acerca de Internet & nbsp; Explorer.
Aquí hay un complemento jQuery que se encargará de todo por usted, Transify ( Transify - un complemento jQuery para aplicar fácilmente la transparencia / opacidad a un elemento & # 8217; s background ) .
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 & Nbsp; KB y solo requiere 1 línea de código para que funcione, y también manejará la animación de la opacidad del fondo si lo desea.
Opacidad de fondo, pero no el texto Tiene algunas ideas. Utilice una imagen semitransparente o superponga un elemento adicional.
Hace un tiempo, escribí sobre esto en Transparencia de fondo del navegador cruzado con 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.
Si eres un 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**
}
Para que el fondo de un elemento sea semitransparente pero tenga el contenido (texto & amp; imágenes) del elemento opaco. Debe escribir el código CSS para esa imagen y debe agregar un atributo llamado opacidad con un valor mínimo. por ejemplo,
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// menor será el valor más transparencia, o menos el valor será transparencia.
background-color: rgba (255,0,0,0.5); como se mencionó anteriormente, es la mejor respuesta simplemente. Decir que usar CSS3, incluso en 2013, no es simple porque el nivel de soporte de varios navegadores cambia con cada iteración.
Aunque background-color es compatible con todos los principales navegadores (no es nuevo en CSS3) [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]
Usando algo como Brújula 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)
CSS3 tiene una solución fácil a su problema. Uso:
background-color:rgba(0,255,0,0.5);
Aquí, rgba significa valor rojo, verde, azul y alfa. El valor verde se obtiene debido a 255 y la mitad de la transparencia se obtiene por 0.5 valor alfa.
Si está usando Less , puede usar fade(color, 30%).
Puede resolver esto para Internet & nbsp; Explorer & nbsp; 8 por (ab) usando la sintaxis de degradado. El formato de color es ARGB. Si está utilizando el Sass puede convertir los 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')";
Puede usar CSS & nbsp; 3 : rgba(red, green, blue, alpha) puro, alpha, donde <=> es 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)
}
<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>
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 :)
Puede usar RGBA (red, green, blue, alpha) en el CSS , algo como esto:
Así que simplemente haz algo como esto que funcionará en tu caso:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Puede hacerlo con
rgba color codeusando css como este ejemplo dado 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>
Normalmente uso esta clase para mi trabajo. Es bastante bueno.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
Según mi punto de vista, la mejor manera de usar el color de fondo con opacidad si usamos esto, entonces no perderemos opacidad para los otros elementos como el color de prueba y el borde, etc.
background-color: rgba(71,158,0,0.8);
Usar color de fondo con opacidad
color de fondo: rgba (R, G, B, Opacidad);
Puede usar color RGB con opacidad como este código de color en RGB (63,245,0) y agregar opacidad como (63,245,0,0.5) y también agregar RGBA para reemplazar RGB. Un uso para la opacidad
div{
background:rgba(63,245,0,0.5);
}
