body - html transparent color

CSS background-image-opacity?

Question

En relación con ¿Cómo doy texto o una imagen con un fondo transparente usando CSS? , pero ligeramente diferente.

Me gustaría saber si es posible cambiar el valor alfa de una imagen de fondo, en lugar de solo el color. Obviamente, puedo guardar la imagen con diferentes valores alfa, pero me gustaría poder ajustar el alfa de forma dinámica.

Hasta ahora, lo mejor que tengo es:

<div style="position: relative;">
<div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
background-image: url(...); opacity: 0.5;"></div>
<div style="position: relative; z-index: 1;">
<!-- Rest of content here -->
</div>
</div>

Funciona, pero es voluminoso y feo, y altera las cosas en diseños más complicados.

Answer 1

Aquí hay otro enfoque para configurar el gradiente y la transparencia con CSS. Sin embargo, necesitas jugar un poco con los parámetros.

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image: -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image: -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image: -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

Answer 2

No puedes editar la imagen a través de CSS. La única solución que se me ocurre es editar la imagen y cambiar su opacidad, o crear diferentes imágenes con todas las opacidades necesarias.

Answer 3

Prueba este truco ... usa la sombra css con la opción (insertada) y crea 200px profundos, por ejemplo

Código:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

También para todos los navegadores:

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

y aumente el número para llenar su caja :)

¡Disfrutar!

Answer 4

Puede hacer el fondo desvanecido con contenido generado CSS

Demostración en http://jsfiddle.net/gaby/WktFm/508/

Html

<div class="container">
contents
</div>

Css

.container{
position: relative;
z-index:1;
overflow:hidden; /*if you want to crop the image*/
}
.container:before{
z-index:-1;
position:absolute;
left:0;
top:0;
content: url(''path/to/image.ext'');
opacity:0.4;
}

Pero no puede modificar la opacidad ya que no podemos modificar el contenido generado.

Sin embargo, podría manipularlo con clases y eventos CSS ( pero no estoy seguro si se ajusta a sus necesidades )

por ejemplo

.container:hover:before{
opacity:1;
}

ACTUALIZAR

Puedes usar transiciones CSS para animar la opacidad ( nuevamente a través de las clases )

demo en http://jsfiddle.net/gaby/WktFm/507/

Añadiendo

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

al .container:before rule hará que la opacidad sea animada a 1 en un segundo.

Compatibilidad

• FF 5 ( quizás 4 también, pero no lo tengo instalado )
• IE 9 falla.
• Los navegadores basados ​​en Webkit fallan ( Chrome ahora lo admite v26, tal vez versiones anteriores también, pero solo se comprobó con mi compilación actual ), pero están conscientes y trabajando en ello ( https://bugs.webkit.org/show_bug.cgi?id=23209 )

.. así que solo el último FF lo admite por el momento ... pero es una buena idea, ¿no? :)

Answer 5

Puede poner un segundo elemento dentro del elemento sobre el que desea tener un fondo transparente.

<div class="container">
<div class="container-background"></div>
<div class="content">
Yay, happy content!
</div>
</div>

Luego haga que el ''.container-background'' se posicione en forma absoluta para cubrir el elemento padre. En este punto, podrá ajustar la opacidad sin afectar la opacidad del contenido dentro de ''.container''.

.container {
position: relative;
}
.container .container-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(background.png);
opacity: 0.5;
}
.container .content {
position: relative;
z-index: 1;
}

Answer 6

Si el fondo no tiene que repetirse, puedes usar la técnica de sprites (puertas deslizantes) donde colocas todas las imágenes con diferente opacidad en una (una al lado de la otra) y luego las desplazas con background-position .

O bien, puede declarar la misma imagen de fondo parcialmente transparente más de una vez, si su navegador objetivo admite múltiples fondos (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). La opacidad de esas imágenes múltiples debe sumar, más fondos definirá.

Answer 7

#id {
position: relative;
opacity: 0.99;
}
#id::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url(''image.png'');
opacity: 0.3;
}

Hack con opacidad 0.99 (menos de 1) crea contexto z-index para que no pueda 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

Answer 8

.class {
/* Fallback for web browsers that doesn''t support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}

Copiado de: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 9

body {
'' css code that goes in your body''
}
body::after {
background: url(yourfilename.jpg);
content: "";
opacity: 0.6;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
width:auto;
height: 100%;
}

Entonces, es el cuerpo :: después de lo que estás buscando. De esta manera, el código para su cuerpo no se cambia o se altera solo en el fondo donde puede realizar cambios cuando sea necesario.