Foros del Web » Creando para Internet » CSS »

Imagen de semitransparente sobre imagen background fijo.

Estas en el tema de Imagen de semitransparente sobre imagen background fijo. en el foro de CSS en Foros del Web. Hola... Nose si me explique bien pero les cuento...estoy haciendo una pagina web la cual le puse una imagen de fondo fijo, lo que necesito ...
  #1 (permalink)  
Antiguo 20/08/2010, 21:24
 
Fecha de Ingreso: enero-2009
Mensajes: 100
Antigüedad: 8 años, 11 meses
Puntos: 0
Pregunta Imagen de semitransparente sobre imagen background fijo.

Hola...

Nose si me explique bien pero les cuento...estoy haciendo una pagina web la cual le puse una imagen de fondo fijo, lo que necesito hacer es colocar el contenido de la pagina sobre otra imagen semitransparente que al mover el scroll se mueva solo la imagen semitransparente con el contenido de la web, la imagen backgraund se mantiene estatica...

Si alguien ha hecho esto o conoce como hacerlo que me ayude...Gracias.
  #2 (permalink)  
Antiguo 21/08/2010, 00:01
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Hola tomuer01, para la imágen del background usa background-attachment:fixed; y para la capa semitransparente puedes usar un png repetido. o bien con css usando dos capas apiladas con z-index (recuerda que para que z-index funcione debes tener posicionada tus capas hermanas en relative, absolute o fixed.). Donde la capa de adelante tiene el contenido y la de atrás el fondo transparente (ejemplo: filter: alpha(opacity=50) ).

Espero te sea útil, un saludo.
  #3 (permalink)  
Antiguo 21/08/2010, 15:56
 
Fecha de Ingreso: enero-2009
Mensajes: 100
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Imagen de semitransparente sobre imagen background fijo.

gracias por la respuesta...

Lo que necesito lograr es algo como esto

http://digitalmonsters.netne.net/index.php

pero la parte del fondo blanco que quede transparente...

Gracias...

Última edición por tomuer01; 21/08/2010 a las 17:41
  #4 (permalink)  
Antiguo 21/08/2010, 21:08
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Hola tomuer01, crea una imagen de 2px de alto por 2px de ancho en photoshop o en el editor de imágenes que ocupes. Luego dale el color de fondo y el grado de transparencia que necesites y guárdala como .png

Por último tomas la capa con css, supongamos que tienes un contenedor así:
<div id="content"></div>
.. y aplicas la imagen repetida como fondo para esa capa:
#content{
width:/*ancho de tu imagen*/;
height:/*alto de tu imagen*/;
background:url(ruta/imagen.png) repeat;
}


y listo, esto funcionará en todos los navegadores XD, saludos.
  #5 (permalink)  
Antiguo 22/08/2010, 11:38
 
Fecha de Ingreso: enero-2009
Mensajes: 100
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Imagen de semitransparente sobre imagen background fijo.

OK...Gracias nuevamente...

Duda el div <div id="content"></div>
va dentro del body sierto?
¿Dentro del div va el contenido de la pagina o no?
o simplemente agrego <div id="content"></div>en la primera linea dentro del body y nada mas?
  #6 (permalink)  
Antiguo 22/08/2010, 14:12
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Si, <div id="content"></div>, como todo contenido que desees incluir en un documento html va dentro de <body></body>

Para un correcto maquetado lo que se hace es crear contenedores en los que vamos incluyendo el contenido que necesitemos.

Por ejemplo: Una estructura común de ver sería:

<body>

<div id="contenedor">
<div id="cabecera">
<ul id="menu">
<li><a class="item" id="item1" href="#">item1</a></li>
<li><a class="item" id="itemN" href="#">item n</a></li>
</ul>
</div>
<div id="cuerpo">
<div id="columna_izquierda">... contenido de la columna izquierda ...</div>
<div id="columna_derecha">... contenido de la columna derecha...</div>
</div>
<div id="pie">... contenido del pie...</div>
</div>

</body>


... y en los estilos del head:


<head>
<style type="text/css">
#contenedor{margin:0 auto; /*con margin:0 auto; centras horizontalmente tu contenedor, en la próxima vemos como hacerlo para ie6 XD*/ width: ... ;}
#cabecera{}
#menu{}
#menu li {}
#menu li a{display:block; /*convertimos los <a> en etiquetas de bloque para poder darle altura , ancho, interlineado, etc.*/}
.item{}
#item1 {}
#itemN{}
#cuerpo{width: ... ; overflow:hidden; /*damos overflow:hidden; para limpiar los floats*/}
#columna_izquierda, #columna_derecha{float:left; flotamos las columnas, ten en cuenta que el ancho total de las columnas no debe superar el ancho de contenido de su padre contenedor, o sea el ancho de #cuerpo. /*[Ancho total = padding+margin+border+width] [Ancho del contenido = width]*/}
#columna_izquierda{width: ... ;}
#columna_derecha{width: ... ;}
#pie{}
</style>
</head>

... por último, lo que deberíamos haber hecho en primer lugar, debes declarar un dtd al principio de la página, antes de <head>.

Bueno, ya tu personalizarás un poco más esto, teniendo esto aprendido solo restaría que aprendas a trabajar con posicionamiento

Espero te sea útil, un saludo.

Última edición por cristian_cena; 22/08/2010 a las 14:17
  #7 (permalink)  
Antiguo 22/08/2010, 17:40
 
Fecha de Ingreso: enero-2009
Mensajes: 100
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Muchas gracias por la guia y ayuda, cristian_cena
  #8 (permalink)  
Antiguo 22/08/2010, 21:59
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Por nada tomuer01, me alegro que te haya servido.
  #9 (permalink)  
Antiguo 23/08/2010, 13:59
 
Fecha de Ingreso: enero-2009
Mensajes: 100
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Una nueva consulta cristian_cena, la imagen semitransparente se ve muy bien, tengo la web ya casi lista pero me gustaria agregarle, para que se vea mucho mas atractiva, una sombra alrededor de todo el contenido de la web...la imagen semitransparente de la pagina con sombra.

Gracias...
  #10 (permalink)  
Antiguo 23/08/2010, 19:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imagen de semitransparente sobre imagen background fijo.

Hola tomuer puedes usar la propiedad css3 box-shadow, la cual no es soportada aún por todos los navegadores. O como alternativa a esto puedes anidar cajas flotadas a la caja que desees sombrear, eso si, necesitaras 5 cajas más de la que tienes.
O sea:

<div id="papi">
<div id="top"></div>
<div id="left"></div>
<div id="center">... aqui el contenido... </div>
<div id="right"></div>
<div id="bottom"></div>
</div>

#papi{overflow:hidden;}
#left, #center, #right{ float:left; }
#papi, #top, #bottom{width:100px;}
#top{background-image:url(...imagen...);}
#bottom{background-image:url(...imagen...);}
#left{background-image:url(...imagen...); width:/*ancho de tu borde izquierdo p.ej:3px*/;}
#center{background-image:url(...imagen...); width:94px;}
#right{background-image:url(...imagen...); width:3px;}

y luego dar los background-image necesarios para cada caja, en donde incluirás los pedazos de sombra que hallas previamente cortado en un editor de imagenes como por ejemplo photoshop.

Este ejemplo puede serte util en cajas de alto variable digamos (que crecen con el contenido que vallas incluyendo)

Si, en cambio el destino de tu caja sombreada es ser de alto fijo digamos, (por ejemplo nose, 100px y que ya no crezca más de ahi)
entonces puedes usar dos cajas menos:

<div id="papi">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>

... ah, y algo muy util y funcional, usar sprites css para las imagenes, esta aplicación es la que uso yo para generar sprites:

#papi{width:; height:; overflow:hidden;}
#left, #center, #right{ float:left; background:(sprite.xxx) no-repeat;}
#papi, #top, #bottom{width:100px;}
#left{ width:; height:; background-position: ... posicion de la imagen para el borde izquierdo... ;}
#center{
width:; height:;
background-position: ... posicion de la imagen para el centro,esta imagen debe poseer el borde superior e inferior... ;
background-repeat:repeat-x; ya que repetimos la imagen en x y generamos el efecto
}
#right{ width:; height:; background-position: ... posicion de la imagen para el borde derecho... ;;}


Cuando crees el sprite hazlo de modo que tenga esta forma:
|_
|_| 1
|_| 2
|_| 3

1 = borde izquierdo
2= imagen para el centro que repetimos en x, aca incluí los bordes top y bottom.
3 = borde derecho

Bueno, espero haberme explicado, ya sabes, si tienes alguna duda nada más pregunta y vemos.

Un saludo.

Etiquetas: fijo, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:06.