Tecnología

Inicio

Cómo crear un semi-transparente de color de fondo en CSS

Cómo crear un semi-transparente de color de fondo en CSS


Cuando los diseñadores Web comenzaron a usar código de Cascading Style Sheet, lo utilizaron para establecer las fuentes y colores a todo los sitios web para evitar la edición de todos los archivos HTML. Desde alrededor de 2008, los diseñadores Web utilizan ahora CSS para evitar también la apertura de sus programas de edición de gráficos. Puede usar CSS puro para agregar fondos semitransparentes a cualquier contenido en una página web, por ejemplo. En el pasado, esto requiere la creación de un archivo PNG y luego añadiendo una solución PNG para Internet Explorer 6. Las versiones de Internet Explorer 8 y por debajo todavía necesita un repliegue, pero se puede añadir que el uso de un filtro.

Instrucciones

1 Abra el archivo HTML de la página Web que desea editar. Utilice un editor de código, como jEdit, Notepad ++ o BBEdit. etiquetas HTML vienen en pares con una apertura y un cierre de la etiqueta, y el contenido afectado por las etiquetas está encerrado dentro de ellos. Encuentra las etiquetas que rodea el contenido que desea dar aa fondo semitransparente. Aquí hay un ejemplo:

<Div id = clase de "caja" = "blue"> contenido ... </ div>

2 Abra el archivo CSS para su sitio web en el editor de código. Si su sitio web no utiliza un archivo CSS, agregar código CSS entre <style> y </ style> etiquetas entre las etiquetas <head> en el archivo HTML. Añadir el código CSS:

.Blue div #box {}

El texto en frente de las llaves son selectores CSS. El primer selector selecciona el nombre de la etiqueta, el segundo selecciona ID y los últimos selecciona por nombre de la clase. Sólo necesita un selector, pero se puede añadir varios selectores como se muestra en el ejemplo. Utilizar la información que se encuentra en las etiquetas HTML para escribir sus selectores.

3 Añadir sus reglas de estilo CSS entre las llaves. Uso RGBA - color rojo, verde y azul, con transparencia alfa - para configurar un color semi-transparente para el fondo. Obtener los valores de color rojo, verde y azul de su programa de gráficos o encontrarlos usando una herramienta del recogedor de color en Internet. El código es el siguiente:

.Blue {

background-color: RGBA (0,0,255,0.5);

}

El ejemplo anterior hace que el color de fondo azul con el 50 por ciento de opacidad. Ajuste el último valor de la serie de cuatro configurado en "1" para hacer un color-opacidad completa.

4 Agregue el siguiente código entre las etiquetas <head> de su archivo HTML para hacer que el color de fondo semi-transparente compatible con Internet Explorer 8 y a continuación:

<! - [If IE]>

<Style>

.blue {

fondo: transparente;

Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 0000ff50, endColorstr = # 0000ff50);

</ Style>

<! [Endif] ->

Vuelva a colocar los seis primeros dígitos después de "startColorstr =" con el código de color hexadecimal, que se puede encontrar usando una herramienta selector de color en Internet. Vuelva a colocar los dos últimos dígitos con el porcentaje de opacidad que desee, como por ejemplo "50" para el 50 por ciento o "75" para el 75 por ciento. Hacer que el valor de "endColorstr" idéntico al "startColorstr".