Foros del Web » Creando para Internet » Diseño web »

Transparencias imagen de fondo

Estas en el tema de Transparencias imagen de fondo en el foro de Diseño web en Foros del Web. Buenos días! Me encuentro con un problema que no encuentro solución. Se trata de algo que quizas deberia ir al foro de css, pero como ...
  #1 (permalink)  
Antiguo 16/09/2014, 03:27
 
Fecha de Ingreso: julio-2007
Mensajes: 28
Antigüedad: 16 años, 9 meses
Puntos: 0
Transparencias imagen de fondo

Buenos días!
Me encuentro con un problema que no encuentro solución. Se trata de algo que quizas deberia ir al foro de css, pero como tambien afecta al diseño lo posteo por aqui. Si esta mal emplazado avisadme y lo cambio.

El problema en question es que yo tengo un div central en la plataforma en la que estoy trabajando. Este div vendria a ser el cuerpo de un muro de usuarios. He conseguido poner una imagen de fondo en la parte superior de este div, justo donde empieza. Lo que ahora no consigo porque no conozco el como, es hacer que esta imagen sea semi transparente. Es decir, que verticalmente se vaya haciendo transparente, empezando con la imagen sin ningun tipo de transparencia y acabando con la imagen transparente del todo. Jugar con el eje X.

Esto que intento es posible? Deberia hacerse desde codigo, pues la imagen en question es subida por el usuario, asi que modificarlas con photoshop o otros no me sirve.

Alguna idea?

Muchas gracias por la atencion!
  #2 (permalink)  
Antiguo 16/09/2014, 13:00
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 9 años, 9 meses
Puntos: 30
Respuesta: Transparencias imagen de fondo

Bueno, antes de contestarte has de especificar más como por ejemplo:
- ¿De qué tipo de imagen hablamos? ¿Es un degradado?
- Con que se transparente verticalmente te refieres a ¿que empieze, desde arriba, opaca (opacity: 1;) y termine, abajo, transparente (opacity: 0;)?
¿La imagen es una foto de algo degradada?

Si es solo un degradado, puedes evitarte la imagen y hacerlo con puro código CSS

Código CSS:
Ver original
  1. background: -webkit-linear-gradient(top, rgba(0, 140, 212, 1) 0%, rgba(0, 160, 212, 0) 100%);
  2. height: 100px; /*Pon la altura que tu quieras, el degradado se adaptará*/

Quedo a la espera de tus respuestas
  #3 (permalink)  
Antiguo 17/09/2014, 05:54
 
Fecha de Ingreso: julio-2007
Mensajes: 28
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Transparencias imagen de fondo

Gracias por responder Trybi!

El efecto deseado es el que tu me comentas: Empezar de arriba con opacity 1 i acabar al final de la imagen con opacity 0.

Las imagenes son subidas por el usuario, y en principio no tienen que tener ningun degradado previo.

El formato de las imagenes es JPG.

Alguna info mas?

Gracias nuevamente!
  #4 (permalink)  
Antiguo 18/09/2014, 10:03
 
Fecha de Ingreso: julio-2014
Mensajes: 334
Antigüedad: 9 años, 9 meses
Puntos: 30
Respuesta: Transparencias imagen de fondo

Ok, así que quieres degradar imagenes... bueno pues te sugiero que visites el siguiente post y me comentes si te funciona lo que allí exponen ya que a mi no me funciona particularmente.

http://www.forosdelweb.com/f53/degra...fondo-1086182/

Etiquetas: css, diseño
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 20:03.