¿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 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 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.
27 answers
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).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-30 08:31:18
En Firefox 3 y Safari 3, puedes usar RGBA como Georg Schölly mencionó.
Un truco poco conocido es que puedes usarlo en Internet Explorer también usando el filtro 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 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 a los elementos secundarios, a través de RGBa y filtros.
Capturas de pantalla prueba de resultados:
Esto es cuando se utiliza 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:54:59
Esta es la mejor solución que se me ocurrió, NO usando CSS 3. Y funciona muy bien en Firefox, Chrome e Internet Explorer por lo que puedo ver.
Ponga un DIV contenedor y dos DIV secundarios en el mismo nivel, uno para el contenido y otro para el fondo. Y usando CSS, auto-tamaño del fondo para adaptarse al contenido y poner el fondo en realidad en la parte posterior utilizando 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-30 20:45:51
Es mejor utilizar un semitransparente .png.
Simplemente abra Photoshop , cree una imagen 2x2 pixel ( picking 1x1 puede causar un error de Internet Explorer!), rellénelo con un color verde y establezca la opacidad en" Pestaña Capas " en 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 lovely 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');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:41
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 panel exterior:
- uno (el "back") 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 dice a la capa posterior que se ajuste al tamaño del panel. (Si necesita que la etiqueta <p> sea absoluta, cambie el panel de <p> a <span> y envuelva todo eso en una etiqueta <p> de posición absoluta.)
La principal ventaja de esta técnica sobre las similares enumeradas anteriormente es que el panel no tiene que tener un tamaño especificado; como se codificó anteriormente, se ajustará a ancho completo (diseño de elemento de bloque normal) y solo tan alto como el contenido. El elemento del panel exterior se puede dimensionar de la manera que desee, siempre y cuando sea rectangular (es decir, el bloque en línea funcionará; el bloque en línea normal no).
Además, te da mucha libertad para el fondo; eres libre de poner realmente cualquier cosa en el elemento back y no afectar el flujo de contenido (si quieres múltiples sub-capas de tamaño completo, solo asegúrate de que también tengan posición: absoluta, ancho / alto: 100%, y superior/inferior/izquierda/derecha: auto).
Una variación para permitir el ajuste de la 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 / 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 lo comprobé, la segunda variación CSS no funciona en Opera.
Cosas a tener en cuenta:
- Los elementos flotantes dentro de la capa cont no estarán contenidos. Usted tendrá que asegurarse de que están despejados o contenidos de otra manera, o se deslizarán fuera de la parte inferior.
- Los márgenes van en el elemento pane y el relleno va en el elemento cont. No use 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.
- As mencionado, todo el asunto tiene que 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 usándola en conjunto con display: inline-block, y con ambos auto y específicos widths / 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 una demostración en vivo de la técnica que se usa ampliamente:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-13 10:54:40
Hay un truco para minimizar el marcado: Use un pseudo elemento como fondo y puede establecer la opacidad sin afectar al elemento principal y sus hijos:
Salida:
Código pertinente:
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 posterior.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-11 18:59:43
El método más fácil sería utilizar un fondo semitransparente imagen PNG.
Puede usar JavaScript para que funcione en Internet Explorer 6 si es necesario.
Utilizo el método descrito en PNGS transparentes en Internet Explorer 6.
Aparte de eso,
Podría fingir usando two side-by-side sibling elements - hacer un semitransparente, entonces absolutely position the other over the top?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-05 07:23:59
Este método le permite tener una imagen en el fondo y no solo un color sólido, y se puede usar para tener transparencia en otros atributos como 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 original opacidad. Por lo tanto, puede usar: antes de 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 (fiddle ) (tenga en cuenta que el DIV con clase dad es solo para proporcionar algún 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 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 fronteras). Se posiciona como absoluto para moverlo detrás de .fancyBg (use valores de cero o lo que sea más apropiado para sus necesidades).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-06 11:17:21
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 CSS y hacer que nos den un atributo de opacidad de fondo! Debe trabajar mano a mano con la función de múltiples fondos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:38
El problema es que el texto realmente TIENE opacidad completa en su ejemplo. Tiene una opacidad completa dentro de la etiqueta p, pero la etiqueta p es solo semitransparente.
Puede agregar una imagen de fondo PNG semitransparente en lugar de realizarla en CSS, o separar el texto y div 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 utiliza un archivo PNG con transparencia, tienes que usar una solución de JavaScript para que funcione en el molesto Internet Explorer...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-25 11:14:45
Así es como hago esto (puede que no sea óptimo, pero funciona):
Cree el div que desea que sea semitransparente. Dale una clase / identificación. Déjalo VACÍO y ciérralo. Dale 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.
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. Dar la posición div: relativo, y superior: -295px (eso es NEGATIVO 295 píxeles). Dale un índice z de 2 para una buena medida, y asegúrate de que su opacidad es 1. Dale estilo a tu párrafo como quieras, pero asegúrate de que las dimensiones sean menores que las del primer div 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 conozco Internet Explorer.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-30 19:04:39
Aquí hay un plugin de jQuery que manejará todo por ti, Transify (Transify-un plugin de jQuery para aplicar fácilmente transparencia / opacidad al fondo de un elemento).
Me estaba topando con este problema de vez en cuando, así que decidí escribir algo que haría la vida mucho más fácil. El script tiene menos de 2 KB y solo requiere 1 línea de código para que funcione, y también se encargará de animar la opacidad del fondo si lo desea.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-25 11:28:36
Opacidad del fondo, pero no del texto tiene algunas ideas. Utilice una imagen semitransparente o superponga un elemento adicional.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 10:31:36
Hace un tiempo, escribí sobre esto en Cross Browser Background Transparency Con CSS.
Extrañamente Internet Explorer 6 le permitirá hacer el fondo transparente y mantener el texto en la parte superior totalmente opaco. Para los otros navegadores, sugiero usar un archivo PNG transparente.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-25 11:17:40
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**
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-11 18:55:46
Color de fondo: rgba(255,0,0,0.5); como se mencionó anteriormente es la mejor respuesta en pocas palabras. Decir usar CSS3, incluso en 2013, no es simple porque el nivel de soporte de varios navegadores cambia con cada iteración.
Mientras que background-color es compatible con todos los navegadores principales (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 Compass o SASS realmente puede ayudar a la producción y la compatibilidad multiplataforma.
[1] W3Schools: CSS background-color Property
[2] Blog de Norman: Lista de comprobación de soporte del navegador CSS3 (Octubre 2012)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-08 20:00:39
CSS3 tiene una solución fácil de su problema. Uso:
background-color:rgba(0,255,0,0.5);
Aquí, rgba significa rojo, verde, azul y valor alfa. El valor verde se obtiene debido a 255 y la mitad de la transparencia se obtiene por 0.5 valor alfa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-20 23:36:50
Para hacer que el fondo de un elemento sea semitransparente pero que el contenido (texto e imágenes) del elemento sea opaco. Necesita escribir 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;
}
// lesser el valor más será transparencia, ore el valor menos será transparencia.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-03 12:09:42
Si estás usando Less, puedes usar fade(color, 30%).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-11 19:01:24
Puede resolver esto para Internet Explorer 8 mediante (ab)utilizando la sintaxis de degradado. El formato de color es ARGB. Si está utilizando el preprocesador Sass 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')";
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-11 18:54:35
Puedes usar CSS puro 3: rgba(red, green, blue, alpha), donde alpha 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)
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-11 18:57:20
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-18 11:05:59
Hay una solución más fácil para poner 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 que la superposición utilizando CSS.
Use una sombra insertada como esta:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Eso es todo:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-11 19:00:31
Se puede utilizar RGBA (red, green, blue, alpha) en el CSS, algo como esto:
Así que simplemente haga algo como esto va a funcionar en su caso:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-20 02:41:59
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 */
}Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-11 08:00:03
Se puede hacer 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-22 06:10:43
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 reemplazar RGB. Un uso para opacidad
div{
background:rgba(63,245,0,0.5);
}Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-29 09:40:00