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?