transparente - ¿Opacidad CSS solo para el color de fondo no el texto en él?

lista de codigos css

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS? 27 respuestas

¿Puedo asignar la propiedad de opacity a la propiedad de background de un div solamente y no al texto en ella?

He intentado:

background: #CCC;
opacity: 0.6;

Pero esto no cambia la opacidad.

Answer 1

Esto funcionará con todos los navegadores.

div {
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:”alpha(opacity=50)”;
filter:alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity:.50;
}

Si no desea que la transparencia afecte a todo el contenedor y sus elementos secundarios, verifique esta solución. Debes tener un hijo absolutamente posicionado con un padre relativamente posicionado para lograr esto. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Consulte la demostración de trabajo en http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Answer 2

La forma más fácil de hacerlo es con 2 divs, 1 con el fondo y 1 con el texto:

#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>

Answer 3

La solución más fácil es crear 3 divs . Una que contendrá las otras 2, la de fondo transparente y la de contenido. Haga que la posición del primer div sea relativa y establezca la de fondo transparente con un z-index negativo, luego ajuste la posición del contenido para que se ajuste sobre el fondo transparente. De esta manera no tendrás problemas con el posicionamiento absoluto.

Answer 4

Mi truco es crear un .png transparente con el color y usar background:url() .

Answer 5

Para cualquier persona que llegue a este hilo, aquí hay un script llamado thatsNotYoChild.js que acabo de escribir y resuelve este problema automáticamente:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Básicamente, separa a los niños del elemento padre, pero mantiene el elemento en la misma ubicación física en la página.

Answer 6

Parece que desea utilizar un fondo transparente, en cuyo caso podría intentar usar la función rgba() :

rgba(R, G, B, A)

R (rojo), G (verde) y B (azul) pueden ser <integer> s o <percentage> s, donde el número 255 corresponde al 100%. A (alfa) puede ser un <number> entre 0 y 1, o un <percentage> , donde el número 1 corresponde al 100% (opacidad total).

Ejemplo RGBa

rgba(51, 170, 51, .1) /* 10% opaque green */
rgba(51, 170, 51, .4) /* 40% opaque green */
rgba(51, 170, 51, .7) /* 70% opaque green */
rgba(51, 170, 51, 1) /* full opaque green */

Un pequeño example muestra cómo se puede usar rgba .

A partir de 2018, prácticamente todos los navegadores admiten la sintaxis rgba .

Answer 7

Una gran manera de hacer esto sería usar css3 de hecho.

Cree un ancho div a una clase, por ejemplo, un supersizer en la parte superior de su página:

luego establece las siguientes propiedades css:

 .supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}

<div class="supersizer"></div>

Answer 8

Usted no puede Debes tener un div separado que sea solo ese fondo, de modo que solo puedas aplicar la opacidad a eso.

Intenté hacer esto recientemente, y como ya estaba usando jQuery, encontré lo siguiente como la menor molestia:

1. Crea los dos divs diferentes. Serán hermanos, no contenidos entre sí ni nada.
2. Dale a la división de text un color de fondo sólido, porque ese será el valor predeterminado de JS-less.
3. Use jQuery para obtener la altura del div de text y aplíquelo al div de background .

Estoy seguro de que hay una forma de ninja CSS de hacer todo esto con solo flotadores o algo así, pero no tuve la paciencia para averiguarlo.

Answer 9

Yo tuve el mismo problema. Quiero un color de fondo 100% transparente. Solo use este código, me funcionó muy bien:

rgba(54, 25, 25, .00004);

Puede ver ejemplos en el lado izquierdo de esta página web (el área del formulario de contacto)

Answer 10

utilizar

background:url("location of image");//use an image with opacity

Este método funcionará en todos los navegadores.

Answer 11

Solo para usuarios MENOS :

Si no te gusta configurar tus colores con RGBA, sino con HEX, hay soluciones.

Podrías usar una mezcla como:

.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

Y usalo como

.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}

En realidad, esto es lo que una función LESS incorporada también proporciona:

.myClass {
background-color: fade(#FFFFFF, 50%);
}

Consulte ¿Cómo convertir el color HEX a rgba con menos compilador?