Foros del Web » Creando para Internet » CSS »

Opacidad de colores en div

Estas en el tema de Opacidad de colores en div en el foro de CSS en Foros del Web. Hola a todos: Tengo un div al que cuando se le pasa el puntero por encima de este quiero que se aclare el div. El ...
  #1 (permalink)  
Antiguo 17/01/2011, 12:40
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Opacidad de colores en div

Hola a todos:

Tengo un div al que cuando se le pasa el puntero por encima de este quiero que se aclare el div.

El div esta formado por imagen, texto y backround de la siguiente forma:

Código CSS:
Ver original
  1. div.fondo {
  2. background-color: #000000;
  3. }
  4.  
  5. div.fondo a {
  6. text-decoration: none;
  7. display: block;
  8. }
  9.  
  10. div.fondo a:hover {
  11.     opacity: .5;
  12.     -moz-opacity: .25;
  13.     filter:alpha(opacity=25);
  14. width: 100%; /// le he agregado esto porque en IE no funcionaba sin esta propiedad
  15.  
  16. }

Código HTML:
Ver original
  1. <div class="fondo">
  2. <a href="index.php">
  3. <p>este es mi texto</p>
  4. <img src="imagen.jpg">
  5. </a>
  6. </div>
  7. <div class="fondo">
  8. <a href="index.php">
  9. <p>este es mi texto</p>
  10. <img src="imagen2.jpg">
  11. </a>
  12. </div>

En Firefox aclara la imagen y el texto pero no el background.
En IE sucede lo mismo, pero además cuando pongo el puntero encima del 2º div, éste sube hasta quedar pegado al primero.

¿Cómo puedo solucionar lo de aclarar también el background?
¿Y cómo solucionar en IE para que el div no suba de posición cuando pongo el puntero encima de éste?

Muchas gracias
  #2 (permalink)  
Antiguo 17/01/2011, 13:05
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Opacidad de colores en div

Revisa el CSS. La opacidad se la has declarado al elemento a:hover no a div.fondo.
Si añades una regla div.fondo:hover con la opacidad correspondiente debería funcionar, pero no tendrá mucho sentido si no hay nada detrás que aparezca al pasar el ratón.
  #3 (permalink)  
Antiguo 17/01/2011, 13:48
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Opacidad de colores en div

Gracias por responder.

La opacidad se la he declarado a hover porque el efecto que quiero conseguir es que cuando el puntero pase encima sólo entonces produzca opacidad (es decir, se aclare la imagen)

Lo que quiero decir es que no se aclara el background cuando pongo el puntero encima del div.

No se si se me ha entendido.
  #4 (permalink)  
Antiguo 17/01/2011, 13:51
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Opacidad de colores en div

No se si te puede ayudar esto, pero quizas si... lo que podrias hacer con el tema del background es hacer uso al rgba() de CSS 3... seguramente esta no es la solucion completa pero, por si las dudas lo menciono.

Mas info aca: http://www.desarrolloweb.com/articul...gba-css-3.html
  #5 (permalink)  
Antiguo 17/01/2011, 14:00
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Opacidad de colores en div

Lee de nuevo mi respuesta. No sé si estaremos hablando el mismo idioma.
Quizás seo yo quien no te ha entendido, pero cuando he probado antes de contestarte, tu página hacía lo que tú esperabas, el fondo de color negro se volvía gris gracias a la transparencia. La probé en FireFox y en IE (las últimas versiones).
Le dí la misma transparencia que le habías asignado al enlace (tu regla a:hover). Te escribo el código CSS:

div.fondo:hover {
opacity: .5;
-moz-opacity: .25;
filter:alpha(opacity=25);
}
  #6 (permalink)  
Antiguo 17/01/2011, 14:21
 
Fecha de Ingreso: marzo-2005
Mensajes: 149
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Opacidad de colores en div

Gracias sanxuan, los dos hablamos castellano pero no te entendía.

Te cuento, en firefox va perfecto pero en IE no hace el efecto.

Código CSS:
Ver original
  1. div.fondo {
  2. background-color: #000000;
  3. }
  4.  
  5. div.fondo a {
  6. text-decoration: none;
  7. display: block;
  8. }
  9.  
  10. div.fondo:hover {
  11. opacity: .5;
  12. -moz-opacity: .25;
  13. filter:alpha(opacity=25);
  14. width: 100%;
  15. }

Código HTML:
Ver original
  1. <div class="fondo">
  2. <a href="index.php">
  3. <p>este es mi texto</p>
  4. <img src="imagen1.jpg">
  5. </a>
  6. </div>
  7. <div class="fondo">
  8. <a href="index.php">
  9. <p>este es mi texto</p>
  10. <img src="imagen2.jpg">
  11. </a>
  12. </div>
  13. <div class="fondo">
  14. <a href="index.php">
  15. <p>este es mi texto</p>
  16. <img src="imagen3.jpg">
  17. </a>
  18. </div>

Qué puedo hacer para el IE v.6 ??
Gracias

Etiquetas: colores, opacidad
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 00:43.