Cómo detener la opacidad heredada en CSS

Escrito por max power | Traducido por luciano ariel castro
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo detener la opacidad heredada en CSS
La propiedad de opacidad CSS permite a los diseñadores web aplicar efectos especiales a los sitios web. (Hemera Technologies/AbleStock.com/Getty Images)

Los diseñadores web utilizan las reglas de Cascading Style Sheet (CSS) para establecer la opacidad de un elemento web. La propiedad de opacidad CSS permite al diseñador crear un efecto similar al vidrio donde el internauta, a través del elemento web, puede ver el elemento de fondo que se encuentra detrás de él. Uno de los problemas es que los valores de la propiedad se heredan automáticamente por elementos secundarios. Evita el problema aplicando ajustes de opacidad al valor RGBA de las propiedades del fondo CSS. Estos valores no son automáticamente heredados por elementos secundarios.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

    Cómo detener la opacidad heredada en CSS

  1. 1

    Escribe una regla CSS para un elemento primario nuevo. En el ejemplo siguiente, se crea una nueva regla denominada # myParentElement. La regla asigna una posición absoluta de 100 píxeles hacia abajo desde la parte superior de la página, 50 píxeles desde la izquierda de la página y 30 píxeles de relleno alrededor del elemento secundario. Es crucial usar la propiedad de relleno, ya que con el tiempo representa el componente transparente del elemento padre mientras centra el elemento secundario.

    myParentElement # { position: absolute; top: 100px; left: 50px; padding: 30px; }

    Cómo detener la opacidad heredada en CSS
    Escribe una regla CSS para un elemento primario nuevo. (Burke/Triolo Productions/Brand X Pictures/Getty Images)
  2. 2

    Asigna una propiedad de transparencia a la regla myParentElement #. En este ejemplo se utiliza el valor RGBA de la propiedad del fondo CSS para el estilo de un fondo parcialmente transparente para el elemento principal. A diferencia de la propiedad de opacidad, el valor de opacidad RGBA no se transmite automáticamente a los elementos secundarios. El valor acepta cuatro parámetros. Las tres primeras configuraciones establecen los componentes individuales de rojo, verde y azul. La cuarta configuración determina la opacidad en una escala de 0,1 a 1. En este ejemplo, los valores de rojo y verde se dejan en cero, mientras que el parámetro azul se coloca en 10, y la opacidad se establece en 0,5. Esto creará una capa transparente usando una pantalla gris.

    myParentElement # { position: absolute; top: 100px; left: 50px; padding: 30px; background: rgba (0, 0, 10, 0,5); }

    Cómo detener la opacidad heredada en CSS
    Asigna una propiedad de transparencia a la regla myParentElement #. (Jupiterimages/Creatas/Getty Images)
  3. 3

    Escribe una regla CSS para el elemento secundario. En este ejemplo, la regla # myChildElment sólo contiene texto negro sobre un fondo blanco. Este elemento no será inherente al valor 0,5 de opacidad de la regla # myParentElment.

    myChildElement # { background: white; color: negro; }

    Cómo detener la opacidad heredada en CSS
    Escribe una regla CSS para el elemento secundario. (Jupiterimages/Photos.com/Getty Images)
  4. 4

    Aplica el CSS al documento HTML. El CSS será un div secundario (elemento de la página web) con la escritura en negro sobre un fondo blanco. Este div es colocado dentro del div primario. El div padre tiene un límite gris parcialmente transparente de 30 píxeles (debido a la propiedad relleno). La transparencia div padre no es heredada por el div secundario.

    <div id="myParentElement"> <div id="myChildElement"> El texto para el div secundario va aquí. </ div> </ div>

    Cómo detener la opacidad heredada en CSS
    Aplica el CSS al documento HTML. (Hemera Technologies/PhotoObjects.net/Getty Images)

Consejos y advertencias

  • El fondo RGBA es apoyado por los navegadores Firefox, Safari, Chrome e Internet Explorer 9. Para crear la compatibilidad con versiones anteriores de Internet Explorer, los diseñadores web deberían utilizar la propiedad de gradiente de filtro de Microsoft (filtro: PROGID: DXImageTransform.Microsoft.gradient), además de la propiedad RGBA (ver Referencias).

No dejes de ver

Recursos

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles