Cómo crear un color de fondo semi transparente con CSS

Escrito por sara williams
Cómo crear un color de fondo semi transparente con CSS

Comstock Images/Comstock/Getty Images

Cuando los diseñadores web comenzaron a utilizar código para Hojas de Estilo en Cascada (CSS), lo usaban para indicar el color y tipo de fuente para sitios web completos y, así, evitar usar HTML. Desde el 2008, los diseñadores web también ocupan las CSS para evitar abrir sus programas de edición de gráficos. Por ejemplo puedes usar CSS puro para agregar fondos semi transparentes a cualquier área de contenido de un sitio web. En el pasado, esto requería la creación de un archivo PNG y después agregar al Internet Explorer 6 el complemento para PNG. Las versiones de Internet Explorer 8 y anteriores aún necesitan ser tratados con reserva pero puedes agregar un filtro.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML que deseas editar. Utiliza un editor de código como jEdit, Notepad++ o BBEdit. Las etiquetas HTML se expresan en pares, una de ellas para la apertura y otra para el cierre, el contenido que será afectado por las etiquetas está entre ambas. Encuentra las etiquetas que rodean el contenido al que deseas darle el fondo semitransparente. Este es un ejemplo: ***.

  2. 2

    Abre el archivo CSS para tu sitio web desde el editor de código. Si tu sitio no usa un CSS, puedes agregarlo usando las etiquetas *** y *** entre la etiqueta *** de tu archivo HTML. Agrega este código CSS: *** El texto frente a las llaves son los selectores CSS. El primero de ellos seleccionará el contenido por su nombre de etiqueta, el segundo lo hará por su nombre de identificación (atributo id) y el último indica el nombre de la clase. Sólo necesitas un selector, pero puedes agregar varios como lo ilustra el ejemplo. Usa la información que está entre las etiquetas HTML para escribir tus selectores.

  3. 3

    Agrega las reglas CSS entre las llaves. Usa el modelo de color RGBa - rojo, verde y azul con transparencia - para ajustar el color semi transparente que será usado como fondo. Puedes obtener los valores rojo, verde y azul con tu editor de gráficos o con una herramienta de selección de color. El código lucirá algo parecido a lo que sigue: ***. El ejemplo anterior hace que el color de fondo sea azul con un 50% de opacidad. Ajusta el último valor del grupo de cuatro números a 1 para hacer un color con opacidad total.

  4. 4

    Agrega el siguiente código entre las etiquetas *** de tu archivo HTML para hacer que el color semi transparente sea compatible con Internet Explorer 8 y anteriores: *** Reemplaza los primeros seis dígitos después de "startColorstr=" con el código hexadecimal del color, el cual puedes encontrar utilizando una herramienta selectora de color en línea. Remplaza los últimos dos dígitos con e porcentaje de opacidad que deseas, puede ser 50 para una opacidad del 50% o 75 para una opacidad del 75%. Haz que el valor de "endColorstr" sea igual al de "startColorstr=".

No dejes de leer...

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

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media