Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: ars1993 en 6 Febrero 2014, 12:21 pm



Título: Problemas con opacity de CSS
Publicado por: ars1993 en 6 Febrero 2014, 12:21 pm
Tengo problemas al aplicar la propiedad de opacity en un div. Me funciona pero no hace exactamente lo que quiero.

Tengo por ejemplo un div que hace la función de un simple botón al cual aplico la propiedad de opacity (para que quede transparente y se vea un poco el fondo de la web).

El problema es que luego cuando escribo un texto dentro de ese div (que seria un texto de hipervínculo) el texto lo pongo el "color: white" y claro, como está dentro del div que tiene "opacity:..." luego se le aplica el opacity también al texto, y no sale de color blanco, sale un blanco-gris medio transparente (por culpa del opacity).

HTML:
Código:
<div class = "boton">
    <a href = "ejemplo.php">Boton_ejempl</a>
</div>

CSS:
Código:
.boton{
    background-color: black;
    opacity: 0.3;
}

.boton a{
    color: white; /*color del texto que quiero que sea blanco de verdad*/
}


A ver si alguien me puede proponer una solución. Muchas gracias!  :)


Título: Re: Problemas con opacity de CSS
Publicado por: alan++ en 6 Febrero 2014, 12:34 pm
El contenido, como la caja siempre heredan las caracteriticas de su contenedor... se me ocurre que podrias ponerle al texto opacity:1, no estoy seguro de que funcione pero es una buena idea...

Otra idea seria que en vez de usar para el cuadro opacity lo hagas transparenton con RGBA... donde la diferencia con RGB es que el A es de Alpha y le da la transparencia, en otras palabras, en vez de hacer transparte el cuadro solo harias transparente el fondo

Suerte!


Título: Re: Problemas con opacity de CSS
Publicado por: EFEX en 6 Febrero 2014, 12:36 pm
Agregale un hover..

Código
  1. .boton:hover{
  2. opacity: 1;
  3. };


Título: Re: Problemas con opacity de CSS
Publicado por: ars1993 en 6 Febrero 2014, 14:00 pm
@EFEX, lo de agregar un hover no me soluciona el problema, pues el texto dentro del div quiero que sea blanco 100% siempre, y no solamente cuando pase el ratón por encima...

La solucion que mas se adapta a lo que necesito es lo de usar RGBA en vez de RGB. Aún así, muchas gracias a los dos, por supuesto :)


Título: Re: Problemas con opacity de CSS
Publicado por: alan++ en 7 Febrero 2014, 12:31 pm
Ojala puedas solucionarlo!  ;)