Foros del Web » Creando para Internet » CSS »

Opacity

Estas en el tema de Opacity en el foro de CSS en Foros del Web. Hola gente quiero hacer algo pero no se si es posible: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .transparent_class {   /* IE 8 */   ...
  #1 (permalink)  
Antiguo 23/11/2014, 07:09
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 1 mes
Puntos: 288
Opacity

Hola gente quiero hacer algo pero no se si es posible:

Código CSS:
Ver original
  1. .transparent_class {
  2.   /* IE 8 */
  3.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  4.  
  5.   /* IE 5-7 */
  6.   filter: alpha(opacity=50);
  7.  
  8.   /* Netscape */
  9.   -moz-opacity: 0.5;
  10.  
  11.   /* Safari 1.x */
  12.   -khtml-opacity: 0.5;
  13.  
  14.   /* Good browsers */
  15.   opacity: 0.5;
  16. }
  17. .texto_blanco{
  18. color:white;
  19. }

Código HTML:
Ver original
  1. <div class=" texto_blanco transparent_class" >larala</div>

Quiero que solo el fondo del div tenga el opacity y el texto se mantenta con el color original.

como podria hacer esto?
dentro de esta caja tambien hay imagenes, videos etc y queda todo con opacity
  #2 (permalink)  
Antiguo 23/11/2014, 09:14
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Opacity

El Opacity se hereda a todo el contenido, por lo que directamente no puedes.

Tienes 2 opciones. Poner un contenido por fuera (el texto) y moverlo con position absolute.

Digamos
<div class="Contenedor">
<div class="Fondo"></div>
<div>Texto</div>
</div>

O usar un png transparente de fondo.

P.D. Olvídate del Ie 5-7 y el código de netscape. También botaba el de Ie8 y el de safari.
  #3 (permalink)  
Antiguo 23/11/2014, 13:45
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: Opacity

Puedes usar también funciones de colores que tienen un canal de transparencia:
  • hsla()
  • rgba()

Por ejemplo:

Código CSS:
Ver original
  1. .transparent_class {
  2.   background: rgba(100,40,20,.5);
  3. }
__________________
(:
  #4 (permalink)  
Antiguo 24/11/2014, 17:51
Avatar de Patriarka  
Fecha de Ingreso: enero-2011
Ubicación: Moreno, Buenos Aires, Argentina
Mensajes: 2.851
Antigüedad: 13 años, 1 mes
Puntos: 288
Respuesta: Opacity

hola si tuve que usar RGBA, por suerte era un fondo blanco con alpha

Gracias!

Etiquetas: color, html, imagenes, opacity
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 04:45.