Fondo transparente elementos a full color

deywibkiss · #1 (**permalink**) 27/09/2012, 22:13

ncesito su ayuda, tengo un div fondo que contiene a su vez dos divs izq derecha.

Necesito poner una imagen de fondo en el div fondo pero darle opacidad 0.6 y que a su vez los dos div hijos izq derecha y sus elementos no sean afectados por la opacidad del fondo mayor.

Lo que pasa es que si le cambio la opacidad al fondo, sus hijos se opacan tambien.

pitufoweb · #2 (**permalink**) 27/09/2012, 22:49

Usa una imagen .png semi-transparente.

Saludos

deywibkiss · #3 (**permalink**) 30/09/2012, 12:47

esa solucion no es viable puesto que el fondo es dinamico, yo muestro una imagen ampliada y el fondo es la misma imagen en mosaico

mariogl84 · #4 (**permalink**) 30/09/2012, 12:52

¿Podemos ver tu código?

anewryzm · #5 (**permalink**) 30/09/2012, 15:28

Muestra el código, por favor.
Si tienes alguna screenshot seria bueno.

Saludos
@Anewryzm

furoya · #6 (**permalink**) 30/09/2012, 17:44

Coincido plenamente con los reclamos previos. Sería una ayuda para entender tu problema. Porque si fuera algo tan elemental como poner un contenido opaco en un contenedor con transparencia, ya hubieses encontrado la respuesta en mil tutoriales y mensajes dentro de este Foro.

De momento, no se puede con imágenes. No existe un ~~background-image-opacity~~. La solución es la que te dieron, poner la imagen con su transparencia.
No entiendo lo de "el fondo es dinamico, yo muestro una imagen ampliada y el fondo es la misma imagen en mosaico".
Puedo adivinar que las imágenes no son tuyas, y las cambias con algún programa, por lo que no tienes manera de convertirlas a *.png .

La única manera es usar capas, como ya habrás visto en esos mil tutoriales.

Por eso es importante ver qué clase de estructura en particular estás usando, para inventar otra cosa.

deywibkiss · #7 (**permalink**) 02/10/2012, 10:38

tengo varias capas anidadas asi:

<div id='principal'>
<div id='izquierda'>
<div id='imagen' style='background-image:url('loquesea.png')'></div>
</div>
<div id='derecha'>
<div id='informacion'></div>
</div>
<div id='fondo' style='background-image:url('loquesea.png'); background-size:60px 60px;'>
</div>

De esta manera la imagen queda en el conetendor izquierdo ampliada, la informacion del producto en la derecha, y de fondo la misma imagen pero en miniaturas de 60px * 60px repetidas en mosaico eje x eje y.

Aqui un screenshot:

La opacidad la quiero en ese fondo, como ven no puedo usar imagenes png semitransparentes puesto que el fondo se construye a partir de la imagen del producto.... cabe resaltar que estoy mostrando esto en un dialog de jquery UI

mariogl84 · #8 (**permalink**) 02/10/2012, 13:26

¿Puedes armar un fiddle o algo así con el código HTML y el CSS? Es que sólo con eso es difícil hacerse una idea de lo que ocurre.

furoya · #9 (**permalink**) 02/10/2012, 15:31

Es que ya se lo explicamos, mariogl84. Van ocho mensajes y seguimos con la misma historia. deywibkiss la va a ganar por cansancio.

¿Cuál es el problema que tienen en este Foro para poner un ejemplo, aunque sea simulando que saben HTML?

Bien. La aclaración cabida convenía hacerla al principio. O no. Realmente no conozco esa library, pero voy a suponer que te permite meter cualquier capa que hayás creado, y que no solamente le mandás parámetros para que te la escriba.

Esa captura sí fue reveladora. Si mirás bien, resulta que la capa la muestra sobre el contenido del documento, previamente "blureado". Eso significa que lo que estás pidiendo no tiene mucho sentido: si el fondo fuese semitransparente, se mezclaría con el documento, y quedaría un pastiche horroroso, incomprensible.
La idea es que el mosaico de fondo se transparente contra el fondo de esa ventana de ... diálogo. Que tiene fondo blanco. Y por lo tanto, el efecto es de aclararse un poco, lo que ayuda a destacar el contenido contra el fondo.

Así se pone un código, deywibkiss. Así...

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

</head>
<body style='background-color:white; padding:30px; '>

<div id='principal' style='width:600px; height:400px; background-size:60px; 
background-image:url(http://imageshack.us/a/img26/2554/guillermojones.jpg);
background-repeat:repeat; border:solid red 1px; position:relative; z-index:0; '>

<div id='cubre' style='width:600px; height:400px; background-color:white; top:0; left:0; 
opacity:0.5; filter:alpha(opacity=50); position:absolute; z-index:-1; '></div>

<div id='izquierda' style='float:left; z-index:1; '>
<div id='imagen' style='width:240px; height:320px; background-size:240px 320px; 
background-image:url(http://imageshack.us/a/img26/2554/guillermojones.jpg);
background-repeat:no-repeat; margin:30px; z-index:1; '></div>
</div>

<div id='derecha' style='width:220px; height:320px; background-color:lime; float:left; 
margin:30px;'>
<div id='informacion' style='color:maroon; font:900 26px/220% cursive; 
background-color:yellow; text-align:center; '>GUILLERMO <br>JONES</div>
</div>
</div>

</body>
</html>

Y es lo que hubieses encontrado en cualquier parte, si te hubieses tomado el trabajo de buscar y leer. Como te dije, se superponen capas.

deywibkiss · #10 (**permalink**) 02/10/2012, 19:28

Gracias furoya por la solucion, y el regaño jejeje, tomaré todas sus sugerencias de manera constructiva para proximas preguntas...

No se si exista una faq que le pueda enseñar a la gente como hacer este efecto...

La solucion es el codigo facilitado por furoya.

aqui esta la captura de la solucion:

En fin muchachos gracias por su paciencia y a ti muchas mas gracias furoya...