Cambiar la opacidad de la imagen de fondo

Question

Tengo un elemento div con bloques de texto y un div principal en el que he establecido una imagen de fondo. Ahora quiero reducir la opacidad de la imagen de fondo. Por favor sugiera cómo puedo hacer eso.

Gracias de antemano.

EDIT:

Busco a cambiar la forma en que mi blog se ve en blogger.com editando el contenido HTML. El código HTML que se ve de la siguiente manera:

<div> 
//my blog post 
</div> 

Me trataron de rodear todo el código anterior con un elemento div y ajustar la opacidad de cada contenedor div por separado de la siguiente manera:

<div style="background-image:url("image.jpg"); opacity:0.5;"> 
<div style="opacity:1;"> 
//my blog post 
</div> 
</div> 

Pero no está funcionando.

Answer 1

No hay nada que se llame opacidad de fondo. La opacidad se aplica al elemento, sus contenidos y todos sus elementos secundarios. Y este comportamiento no se puede cambiar simplemente anulando la opacidad en los elementos secundarios.

La opacidad del elemento principal frente a la del elemento principal ha sido un problema de larga data y la solución más común para ello es usar colores de fondo rgba(r,g,b,alpha). Pero en este caso, dado que es una imagen de fondo, esa solución no funcionará. Una solución sería generar la imagen como PNG con la opacidad requerida en la imagen misma. Otra solución sería sacar al niño div y hacerlo absolutamente posicionado.

Answer 2

no puede utilizar la transparencia en el fondo-imágenes directamente, pero se puede conseguir este efecto con algo como esto:

http://jsfiddle.net/m4TgL/

HTML:

<div class="container"> 
    <div class="content">//my blog post</div> 
</div>​ 

CSS:

.container { position: relative; } 

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

.content { 
    position: relative; 
    z-index: 2; 
}​ 

Answer 3

y puede hacerlo por simple código:

filter:alpha(opacity=30); 
-moz-opacity:0.3; 
-khtml-opacity: 0.3; 
opacity: 0.3; 

Answer 4

Puede crear varios divs y hacer eso:

<div style="width:100px; height:100px;"> 
    <div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div> 
    <div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div> 
</div> 

lo hice par de veces ... simple, pero eficaz ...

Answer 5

Hoy en día, es posible hacerlo simplemente con la propiedad CSS "background-blend-mode".

<div id="content">Only one div needed</div> 

div#content { 
    background-image: url(my_image.png); 
    background-color: rgba(255,255,255,0.6); 
    background-blend-mode: lighten; 
    /* You may add things like width, height, background-size... */ 
} 

Mezclará el color de fondo (que es blanco, opacidad de 0,6) en la imagen de fondo. Conozca más here (W3S).

Answer 6

Respondiendo a un comentario anterior, puede cambiar el fondo por variable en el ejemplo "contenedor" si el CSS está en su página php y no en la hoja de estilo css.

$bgimage = '[some image url]; 
background-image: url('<?php echo $bgimage; ?>'); 

Answer 7

Lo que hice es:

<div id="bg-image"></div> 
<div class="container"> 
    <h1>Hello World!</h1> 
</div> 

CSS:

html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    height: 100%; 
    width: 100%; 
} 
#bg-image { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background-image: url(images/background.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    opacity: 0.3; 
}