una - imagen de fondo transparente html

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 por adelantado.

EDITAR:

Estoy buscando cambiar la forma en que mi publicación de blog se ve en blogger.com editando el contenido html. El código html se ve como sigue:

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

Intenté rodear todo el código anterior con un elemento div y establecer la opacidad de cada div por separado como se muestra a continuación:

<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

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... */
}

Combina el color de fondo (que es blanco, opacidad de 0,6) en la imagen de fondo. Obtenga más información aquí (W3S) .

Answer 2

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;
}

Answer 3

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

La opacidad entre niños y padres ha sido un problema de larga data y la solución más común es el uso de colores de fondo rgba(r,g,b,alpha) . Pero en este caso, ya que es una imagen de fondo, esa solución no funcionará. Una solución sería generar la imagen como un PNG con la opacidad requerida en la propia imagen. Otra solución sería sacar el div niño y hacerlo absolutamente posicionado.

Answer 4

No puedes usar la transparencia en las imágenes de fondo directamente, pero puedes lograr 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 5

Puedes 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 un par de veces ... Simple, pero efectivo ...

Answer 6

Respondiendo a un comentario anterior, puede cambiar el fondo por variable en el ejemplo del "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

Y puedes hacerlo por simple código:

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