css - una - Establecer la opacidad de la imagen de fondo sin afectar los elementos secundarios

quitar fondo blanco a una imagen css

Question

¿Es posible establecer la opacidad de una imagen de fondo sin afectar la opacidad de los elementos secundarios?

Ejemplo

Todos los enlaces en el pie de página necesitan una viñeta personalizada (imagen de fondo) y la opacidad de la viñeta personalizada debe ser del 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Lo que he intentado

Intenté configurar la opacidad de los elementos de la lista al 50%, pero la opacidad del texto del enlace también es del 50%, y no parece haber una manera de restablecer la opacidad de los elementos secundarios:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

También intenté usar rgba, pero eso no tiene ningún efecto en la imagen de fondo:

#footer ul li {
    /* rgba doesn''t apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Answer 1

Desafortunadamente, al momento de escribir esta respuesta, no hay una forma directa de hacerlo. Necesitas:

1. usa una imagen semitransparente para el fondo (mucho más fácil).
2. agregue un elemento adicional (como div) al lado de los niños que desea opacar, añada fondo y, después de hacerlo semitransparente, colóquelo detrás de los niños mencionados.

Answer 2

Encontré un tutorial bastante bueno y simple sobre este tema. Creo que funciona muy bien (y aunque es compatible con IE, simplemente les digo a mis clientes que utilicen otros navegadores):

Transparencia de fondo CSS sin afectar los elementos secundarios, a través de RGBa y filtros

Desde allí puede agregar soporte de degradado, etc.

Answer 3

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 a sus hijos, consulte esta solución. Debe tener un hijo absolutamente posicionado con un padre relativamente posicionado.

Ver demostración en http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Answer 4

La propiedad "filtro" necesita un número entero para el porcentaje de opacidad en lugar del doble, para poder trabajar con IE7 / 8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PD: publico esto como una respuesta, ya que SO, necesita al menos 6 caracteres cambiados para una edición.

Answer 5

Lleva tu imagen a un editor de imágenes, baja la opacidad, guárdala como .png y úsala en su lugar.

Answer 6

Otra opción es el enfoque de CSS Tricks de insertar un pseudo elemento con el tamaño exacto del elemento original justo detrás de él para simular el efecto de fondo opaco que estamos buscando. Algunas veces necesitará establecer una altura para el pseudo elemento.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 7

Para ajustar realmente las cosas, le recomiendo que coloque las selecciones adecuadas en los contenedores de orientación del navegador. Esto fue lo único que funcionó para mí cuando no pude lograr que IE7 e IE8 "jugaran bien con los demás" (ya que actualmente estoy trabajando para una empresa de software que continúa ayudándolos).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn''t blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Es posible que tenga redundancias en el código anterior; si alguien desea limpiarlo más, ¡siéntase libre!

Answer 8

Puede usar CSS linear-gradient() con rgba() .

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Answer 9

Puedes poner la imagen en el div: after o div: before y establecer la opacidad en ese "div virtual"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

encontrado aquí http://css-tricks.com/snippets/css/transparent-background-images/

Answer 10

Si está utilizando la imagen como una viñeta, podría considerar: antes del pseudo elemento.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Answer 11

Si tiene que establecer la opacidad solo en la viñeta, ¿por qué no establece el canal alfa directamente en la imagen? Por cierto, no creo que haya una manera de establecer la opacidad a una imagen de fondo a través de css sin cambiar la opacidad de todo el elemento (y sus hijos también).

Answer 12

Solo para agregar lo anterior ... puedes usar el canal alfa con los nuevos atributos de color, por ej. rgba (0,0,0,0) ok, así que esto es negro pero con opacidad cero, por lo que como padre no afectará al niño. Esto solo funciona en Chrome, FF, Safari y ... adelgazo O.

convierte tus colores hexadecimales a RGBA

Answer 13

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Puedes probar este código. Creo que será trabajado. Puedes visitar la demo

Answer 14

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Hack con opacidad .99 (menos de 1) crea un contexto z-index por lo que no puede preocuparse por los valores globales de z-index. (Trate de eliminarlo y vea qué sucede en la próxima demostración, donde el contenedor padre tiene un índice Z positivo).
Si su elemento ya tiene índice Z, entonces no necesita este truco.

Demo de esta técnica .