Si tengo un div que actúa como una caja, y lo hago realmente sexy con un 10% de opacidad. ¿Cómo lo contrarreste ya que todo en el div también obtiene la opacidad? Digamos que tengo una caja (div) con un borde de 1px y texto, poner opacidad en ella hará que se vea mal y solo quiero opacidad en el fondo.contrarrestando una opacidad div?
Puede usar una imagen PNG semitransparente para el fondo del elemento. Necesitará una solución como Supersleight para compatibilidad con IE6.
El contenido de un elemento que tiene opacidad hereda esa opacidad. Necesitarás dividirlo en dos partes: el fondo y los contenidos. Posiciona absolutamente los contenidos sobre el fondo. Su contenido no puede estar dentro del elemento de opacidad.
Esto es cierto si está hablando de 'opacity' la propiedad CSS, pero hay varias otras formas de lograr el efecto. – e100
Esto es cómo se puede aplicar la opacidad de los colores de fondo, y no a todo el elemento y sus hijos:
background: rgba(0,0,0, 0.5) //gives you a black background with 50% opacity
puedes probarlo aquí: http://jsfiddle.net/ypaTH/
había un parecido pregunta aquí: How to give cross browser transparency to element's background only? (con la versión IE)
Esto (a pesar de ser la solución 'correcta' y una característica CSS3) solo funciona en navegadores modernos como Chrome, Firefox, Safari. –
puede encontrar la versión de IE en la otra respuesta que di en la versión anterior. – meo
y la opacidad no funciona en IE, así que no le importaría – meo
debido a todos los tipos de navegador, creo que un PNG es la mejor opción si no fuera a usar una lib como jquery o algo así (si tiene la función Necesito). ¡Gracias a todos por todas las respuestas! – Jason94