Pregunta ¿Cómo doy texto o una imagen con un fondo transparente usando CSS?
¿Es posible, usando solo CSS, hacer el background
de un elemento semitransparente pero tiene el contenido (texto e imágenes) del elemento 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 a la opacity:0.6
del padre
1997
2018-04-30 09:00
origen
Respuestas:
O usa un semitransparente PNG imagen o use CSS3:
background-color:rgba(255,0,0,0.5);
Aquí hay un artículo de css3.info, Opacidad, RGBA y compromiso (2007-06-03).
2115
2017-07-13 20:51
En Firefox 3 y Safari 3, puedes usar RGBA como Georg Schölly mencionó.
Un truco poco conocido es que también puedes usarlo en Internet Explorer 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 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>

456
2018-04-30 20:42
Esta es la mejor solución que pude encontrar, NO uso CSS 3. Y funciona muy bien en Firefox, Chrome e Internet Explorer por lo que puedo ver.
Ponga un contenedor DIV y dos DIV secundarios en el mismo nivel, uno para el contenido y otro para el fondo.
Y usando CSS, ajuste automáticamente el tamaño del fondo para que se ajuste al contenido y coloque el fondo en la parte de atrás usando z-index.
.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>
97
2018-05-24 16:07
Es mejor usar un semitransparente .png
.
Solo abre Photoshop, crear un 2x2
imagen de píxel (cosecha 1x1
puede causar un error de Internet Explorer!), llénelo de color verde y establezca la opacidad en "Pestaña Capas" al 60%. Luego guárdalo y haz que sea una imagen de fondo:
<p style="background: url(green.png);">any text</p>
Funciona genial, por supuesto, excepto en 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');
}
54
2017-10-05 08:15
Para un color de fondo semitransparente simple, las soluciones anteriores (imágenes CSS3 o bg) son las mejores opciones. Sin embargo, si quieres hacer algo más elegante (por ejemplo, animación, fondos múltiples, etc.), o si no quieres confiar en CSS3, puedes 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 al usar dos "capas" dentro del elemento del panel exterior:
- uno (el "respaldo") 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.
los position: relative
en el panel es importante; le dice a la capa que se ajuste al tamaño del panel. (Si necesita el <p>
etiqueta para ser absoluta, cambie el panel de un <p>
a un <span>
y envolver todo eso en una posición absolutamente <p>
etiqueta.)
La principal ventaja de esta técnica sobre las similares a la lista anterior es que el panel no tiene que ser de un tamaño específico; como se ha codificado anteriormente, se ajustará a ancho completo (diseño normal de elementos de bloque) y solo tan alto como el contenido. El elemento del panel exterior se puede dimensionar de la manera que desee, siempre que sea rectangular (es decir, el bloque en línea funcionará; el antiguo en línea no lo hará).
Además, te da mucha libertad para el fondo; usted es libre de poner realmente cualquier cosa en el elemento posterior y que no afecte el flujo de contenido (si desea varias subcapas de tamaño completo, simplemente asegúrese de que también tengan una posición: absoluta, ancho / alto: 100%, y arriba / abajo / izquierda / derecha: automático).
Una variación para permitir el ajuste de fondo de fondo (a través de arriba / abajo / izquierda / derecha) y / o fijación de fondo (eliminando uno de los pares izquierda / derecha o arriba / 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;
}
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 revisé, 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ás asegurarte de que estén limpios o bien contenidos, o se saldrán del fondo.
- Los márgenes van al elemento del panel y el relleno va al elemento cont. No utilice el opuesto (márgenes en la 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éntase 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 al usarla en tándem con display: inline-block
y con ambos auto
y específico width
s /min-height
s:
.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 usa ampliamente:

51
2018-04-30 09:11
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:
MANIFESTACIÓN
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.
47
2018-01-14 00:14
El método más fácil sería usar un fondo semitransparente Imagen PNG.
Puedes usar JavaScript para que funcione en Internet Explorer 6
si lo necesitas.
Yo uso el método descrito en PNG transparentes en Internet Explorer 6.
Aparte de eso,
podrías fingir usando two side-by-side sibling elements
- hacer uno semitransparente, entonces absolutely position the other over the top
?
23
2018-04-30 09:14
Este método le permite tener una imagen en segundo plano 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.
Utilizar :before
(o :after
) en CSS y darles el valor de opacidad para dejar el elemento en su opacidad original. Por lo tanto, puede usar: antes 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 (violín) (tenga en cuenta que el DIV
con clase dad
es solo para proporcionar un cierto contexto y contraste a los colores, este elemento extra 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 de CSS que desea tener con transparencia (fondo rojo en este ejemplo, pero puede ser una imagen o bordes). Está posicionado como absoluto para moverlo detrás .fancyBg
(use valores de cero o lo que sea más apropiado para sus necesidades).
20
2018-01-26 16:36