Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Estas en el tema de ¿cómo hacer efecto trasparencia al fondo no al texto de un div? en el foro de CSS en Foros del Web. Recuerdo haber visto en algún lado un menú desplegable, que al abrirse dejaba ver el fondo, con un opacity de .3, quizá. El efecto hover ...
  #1 (permalink)  
Antiguo 19/05/2013, 23:05
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
Pregunta ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Recuerdo haber visto en algún lado un menú desplegable, que al abrirse dejaba ver el fondo, con un opacity de .3, quizá. El efecto hover consistía en que el ítem semi-transparente se volvía un poco más opaco, con un opacity de .7, talvez. Pero el texto de los ítems del menú nunca era transparente, sino sólido. ¿Cómo hacer eso?

La cosa no es tan fácil como poner un opacity al elemento, pues la opacidad aplica a todo el elemento, lo cual incluye el texto adentro. ¿Cómo hay que proceder para que el texto quede sólido, sin opacidad?

Veamos el siguiente ejemplo:

Código HTML:
Ver original
  1. <div class="capaTransparente">
  2.   Texto dentro de un DIV trasparente
  3. </div>
  4.  
  5. <div class="capaFondo">
  6.     Qu. Whether a people can be called poor, where the common sort are well fed, clothed, and lodged?
  7.     Qu. Whether the drift and aim of every wise State should not be, to encourage industry in its members?
  8.     Qu. Whether the four elements, and man's labor therein, be not the true source of wealth?
  9.     Qu. Whether money be not only so far useful, as it stirred up industry, enabling men mutually to participate the fruits of each other's labor?
  10.     Qu. Whether any other means, equally conducing to excite and circulate the industry of mankind, may not be as useful as money.
  11. </div>

Le aplicamos el siguiente estilo:
Código CSS:
Ver original
  1. .capaFondo {
  2.       position:relative;
  3.       top:0px;
  4.       left:0px;
  5.       width:500px;
  6.       height:300px;
  7.       background-color:blue;}
  8. .capaTransparente {
  9.       position:absolute;
  10.       top:50px;
  11.       left:50px;
  12.       width:300px;
  13.       height:200px;
  14.       background-color:gray;
  15.       color:black;
  16.       font-size:40px;
  17.       z-index:1;
  18.       opacity:.3;}
  19.  
  20. .capaTransparente:hover {opacity:.7;}

Última edición por berkeleyPunk; 19/05/2013 a las 23:12
  #2 (permalink)  
Antiguo 20/05/2013, 04:01
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

No uses opacity. Usa rgba() o hsla() para especificar el color de fondo, ya que tienen un canal de transparencia.

Código CSS:
Ver original
  1. . capaTransparente {
  2.   background: rgba(200,200,200,0.3);
  3. }
  #3 (permalink)  
Antiguo 20/05/2013, 09:52
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
De acuerdo Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Cita:
Iniciado por pzin Ver Mensaje
No uses opacity. Usa rgba() o hsla()...
Otra vez, ¡carajo!, yo ya conocía el tal RGBA, que aunque no lo he utilizado, no se me ocurrió tomarlo como respuesta para este problema.

Pero tienes razón PZIN, con el rgba() se puede asignar transparencia a cada elemento por separado. Por ejemplo al background del div, y esto no aplica al texto dentro del div.



Otra cosa compañero PZIN, ¿sabrás cómo demonios hacer que el cochino Internet Explorer 8 soporte este efecto?

Última edición por berkeleyPunk; 20/05/2013 a las 10:00
  #4 (permalink)  
Antiguo 20/05/2013, 11:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Usa los filtros de Microsoft:

Código CSS:
Ver original
  1. .capaTransparente {
  2.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30111111,endColorstr=#30111111);
  3. }

El 30 en el porcentaje de transparencia, lo demás el color en hexadecimal.
  #5 (permalink)  
Antiguo 20/05/2013, 14:51
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Cita:
Iniciado por pzin Ver Mensaje
Usa los filtros de Microsoft...
Increíblemente he logrado que Internet Explorer (8) haga lo que quiero, pero no Firefox!

Es decir, que el fondo de un div sea semitransparente pero NO su contenido.

PZIN, RGBA() sirve a la perfección para dar transparencia al div y no al contenido. El problema es que sirve en Firefox no en IE. Para dar el mismo efecto en IE, necesito usar el atributo filter:alpha(opacity=50). Y este atributo no funciona si declarmos RGBA(). Para que funcione el filter, hay que poner el color en RGB().


Básicamente la pregunta sigue siendo la misma, pero más específica: ¿cómo hacer semi-transparente el fondo de un div, pero no su contenido, tanto en Firefox como en Internet Explorer?

He aquí lo que llevo:
Código HTML:
Ver original
  1. <div id="capaFondo">
  2.     <div id="capaTransparente">
  3.       <div>Este texto debe ser negro sólido, SIN transparencia.</div>
  4.     </div>
  5.   </div>

Código CSS:
Ver original
  1. #capaFondo {
  2.       width:150px;
  3.       height:350px;
  4.       background-color:gray;}
  5.   #capaTransparente {
  6.       width:300px;
  7.       height:200px;
  8.       font-size:40px;
  9.       z-index:1;
  10.       color:black;   
  11.  
  12.       background-color:blue;
  13.       filter:alpha(opacity=50); }
  14.      
  15.   #capaTransparente div {
  16.       position:relative;        // Extrañamente, hay que posicionar el elemento para que la transparencia funcione.
  17.       opacity:1;
  18.       filter:alpha(opacity=100);}

Última edición por berkeleyPunk; 20/05/2013 a las 14:57
  #6 (permalink)  
Antiguo 21/05/2013, 06:30
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

En Firefox puedes usar rgba(): http://caniuse.com/css3-colors

Prueba primero a especificar un fondo de color transparente, luego aplicas lo demás para que se sobreescriba.

Y según el código que has puesto, ahí sigues usando opacity y no veo rgba() por ningún sitio.
  #7 (permalink)  
Antiguo 22/05/2013, 11:31
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Cita:
Iniciado por pzin Ver Mensaje
En Firefox puedes usar rgba()
Entiendo, lo he hecho y funciona a la pura perfección en Firefox, el caso es que si al mismo tiempo uso el filter para IE8, entonces este filter no jala. ¿Por qué? Imagino que porque IE no entiende cómo hacer transparencia (con filter) a un color (RGBA) que ya tiene transparencia.

Cita:
Iniciado por pzin Ver Mensaje
Y según el código que has puesto, ahí sigues usando opacity y no veo rgba() por ningún sitio.
El texto está dentro de un div. Este div y su texto NO deben tener transparencia, por eso pongo el opacity=1 para Firefox y filter:alpha(opacity=100) para IE.

Quien debe ser semi-transparente es el div #capaTransparente, por eso le pongo filter:alpha(opacity=50) para IE. Si abrimos esto en IE la transparencia funciona bien. Pero si añadimos al div #capaTransparente el RGBA para Firefox, bien, funciona la transparencia para Firefox pero deja de funcionar el filter de IE.
Esto es, o sirve uno o sirve otro, pero no ambos al mismo tiempo.

Por eso no pongo el RGBA para Firefox, de momento.
  #8 (permalink)  
Antiguo 22/05/2013, 11:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

¿No has probado a usar el filtro que te dije en vez del filtro de opacidad de IE?
  #9 (permalink)  
Antiguo 22/05/2013, 11:53
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

Cita:
Iniciado por pzin Ver Mensaje
¿No has probado a usar el filtro que te dije en vez del filtro de opacidad de IE?
Carajo!

Lo hice cuando lo posteaste, el resultado fue un feo degradado sin transparencia. Así que lo soslayé.

Ahora lo acabo de probar otra vez, como dices, por si acaso, y funciona a la pura perfección. ¿Qué pasó? No sé. Pero creo que lo probé en un HTML no anidado.
Muestro cómo quedo todo:
Código CSS:
Ver original
  1. #capaFondo {
  2.           width:150px;
  3.           height:350px;
  4.           background-color:gray;}
  5.       #capaTransparente {
  6.           width:300px;
  7.           height:200px;
  8.           font-size:40px;
  9.           z-index:1;
  10.           color:black;  
  11.      
  12.           background-color:rgba(0,0,102,.5);
  13.           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30111111,endColorstr=#30111111);}
  14.          
  15.       #capaTransparente div {
  16.           position:relative;        // Extrañamente, hay que posicionar el elemento para que la transparencia funcione.
  17.           opacity:1;
  18.           filter:alpha(opacity=100);}

Código HTML:
Ver original
  1. <div id="capaFondo">
  2.         <div id="capaTransparente">
  3.           <div>Este texto debe ser negro sólido, SIN transparencia.</div>
  4.         </div>
  5.       </div>


Gracias PZIN, ahora sí funciona en Firefox e Internet Explorer 8.

PD. Muchos se quejan de que IE sea una lata, y que por él, los programadores y diseñadores web (yo no me incluyo porque yo no soy nadie en programación) tienen que quebrarse la cabeza para programar. Yo creo que tienen razón en cierto sentido, pero no absolutamente. Porque sin las prácticas monopólicas de IE (que ya no son tan monopólicas porque IE ha ido perdiendo mucho terreno frente a Firefox y Chrome), el mundo web sería más facilón, no habría obstáculos. Pero son éstos lo que le da sabor a la vida web, los retos. ¿A poco no?

Saludos, y a ver si no regreso de nuevo a preguntar: ¿cómo hacer que funcione la transparencia en Opera y Safari?

Última edición por berkeleyPunk; 22/05/2013 a las 12:19
  #10 (permalink)  
Antiguo 22/05/2013, 12:42
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: ¿cómo hacer efecto trasparencia al fondo no al texto de un div?

El problema hoy en día es muchas veces culpa de hacer las cosas mal desde un principio, y luego ir arreglando las cosas malamente con hacks y demás.

Tampoco es muy justo comparar siempre IE8 con las últimas versiones de Chrome. De hecho usa el mismo motor de renderizado de IE6, y por eso es tan malo y soporta pocas cosas. Pero es un tema muy complejo.

De todas formas, quien haya hecho una web compatible con IE6, 7 y 8 (cuando se requería), sabe cómo eran las cosas por aquel entonces y cómo son hoy en día, está más que contento con IE9 y 10. Aunque más con Chrome, Firefox, Safari y Opera, claro. :D

Etiquetas: Ninguno
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 19:43.