una - negro transparente css




¿Opacidad CSS solo para el color de fondo no el texto en él? (8)

Esta pregunta ya tiene una respuesta aquí:

¿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.


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


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>


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


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.


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>


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.


utilizar

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

Este método funcionará en todos los navegadores.


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?







opacity