4 maneras de configurar los colores de fondo en HTML

Métodos: 4Fondo con colores sólidos Fondo con colores cambiantes Fondo con imágenes el fondo del gradiente

Tener colores brillantes en el fondo de la pantalla puede ayudar a atraer a más lectores a su página. Hay varias opciones para aquellos que quieren usar más colores sólidos. Para ponerlos en marcha, utilizar el lenguaje CSS, en lugar de las etiquetas HTML ya obsoletos. Por lo tanto, el sitio web sea compatible con la mayoría de navegadores, y puede ser fácilmente actualizado cada vez que hay nuevas características.

método 1

Fondo con colores sólidos

Utilice la propiedad "background-color" CSS. El atributo de edad HTML ya no se apoya en HTML5. El color de fondo, y otros aspectos estilísticos de la página, deben estar configurados con CSS.

añadir una propiedad "background-color" el elemento . Este elemento se mostrará en la página.

gt;gt;gt;gt;cuerpo {background-color:}gt;gt;gt;gt;gt;

Añadir el color que desee mostrar. Hay tres maneras de hacer esto: entrar en los principales colores (rojo, azul, amarillo, verde, etc.) con los códigos rojo, azul, amarillo, verde (En Inglés) etc.- utilizar códigos hexadecimales para el color, como # 000000 para negro- o introduzca el valor de color RGB, como rgb (255,255,0) a amarillo. A continuación, aquí es un ejemplo de código hexadecimal en uso - que va a dar al sitio el fondo del mismo color que la fachada de wikiHow.

gt;gt;gt;gt;cuerpo {background-color: # 93B874-}gt;gt;gt;gt;gt;

rojo - # FF0000

naranja - # FFA500

amarilla - # FFFF00

verde - # 008000

azul - # 0000FF

Anil - # 4B0082

púrpura - # EE82EE

Utilice la propiedad "background-color" aplicar colores de fondo para otros elementos. Usted no está limitado sólo a hacer esto en el elemento . Si lo desea, también puede establecer que en otra parte:

gt;gt;gt;gt;cuerpo {background-color: # 93B874-}h1 {background-color: naranja-}p {background-color: rgb(255,0,0)-}gt;gt;gt;gt;Esta cabecera tendrá un fondo naranjagt;gt;Este apartado tendrá un fondo rojogt;gt;gt;

método 2

Fondo con colores cambiantes

Añadir la transición de código. Se puede crear un fondo animado, por lo que su cambio de tono periódicamente. Esta función no está soportada por los navegadores más antiguos, especialmente Internet Explorer (a menos que tenga una versión 10 o superior). Además, debe incluir dos conjuntos de códigos de animación, como Chrome, Opera y Safari utilizan una sintaxis diferente en comparación con IE, Firefox y otros navegadores.

gt;gt;gt;gt;cuerpo {-webkit-animación: 20s mymove infinita- / * Chrome, Opera y Safari * /animación: 20s mymove infinita- / * * Sintaxis estándar /background-color: # C9DCB9-}gt;gt;gt;gt;gt;

El valor 20s anterior puede ser ajustado de acuerdo con el tiempo de transición de colores. 20s Esto significa que esta transición se llevará a cabo en 20 segundos. Si desea cambiarlo, cambiar tanto el webkit como la sintaxis estándar.
El valor infinito Se puede cambiar con el fin de repetir ciertos momentos. Código background-color: # C9DCB9- en el elemento indica el color que se mostrará después de la animación.

Agregue el código de colores que desea dar a la página durante la transición. Después de que el código de animación, establecer el código de los colores que desea utilizar en el ínterin. Una vez más: generar diferentes entradas para diferentes navegadores.

gt;gt;gt;gt;cuerpo {-webkit-animación: 20s mymove infinita- / * Chrome, Opera y Safari * /animación: 20s mymove infinita- / * * Sintaxis estándar /background-color: # C9DCB9-}/ * Chrome, Opera y Safari * /@ Mymove -webkit-{fotogramas clavede {background-color: # 93B874-}a {background-color: # C9DCB9-}}/ * * Sintaxis estándar /@keyframes mymove {de {background-color: # 93B874-}a {background-color: # C9DCB9-}}gt;gt;gt;gt;gt;

método 3

Fondo con imágenes

Usar una imagen como fondo de la página. Elija un archivo guardado en el servidor de Internet existente debe ser almacenado con d la página web del propio archivo.

gt;gt;gt;gt;cuerpo {Imagen de fondo: url("nomedaimagem.jpg")- / * Dado que la imagen se encuentra en la misma carpeta que la página, sólo tiene que introducir el nombre y la extensión del archivo * /background-color: # 93B874- / * Es bueno elegir un color de fondo en caso de que la imagen no se carga * /}gt;gt;gt;gt;gt;

El uso de múltiples capas de imágenes. Los archivos pueden ser cargados en la otra. Esta estrategia es útil si tiene imágenes con fondo transparente que se complementan entre sí cuando "apilada".

gt;gt;gt;gt;cuerpo {Imagen de fondo: url("imagem1.jpg"), url("imagem2.jpg")-background-color: # 93B874-}gt;gt;gt;gt;gt;

Aparece la primera imagen de la lista en la parte superior de la pila. La segunda vendrá poco después.

método 4

el fondo del gradiente

Usar CSS para crear un gradiente de fondo que se mueve de un color a otro. Esta función no es compatible con Internet Explorer 9 o versiones anteriores.

Entender la sintaxis básica. Hay dos datos esenciales respecto a la creación de un fondo transparente para el efecto ángulo de punta / salida y la transición de color. Puede seleccionar y utilizar diferentes tonos o establecer una dirección o en un ángulo específico para este fin.

fondo: gradiente lineal(dirección/ ángulo, color1, color2, color3, etcétera)-

Hacer un efecto gradiente vertical. Si no se especifica la dirección, el efecto va de arriba a abajo. diferentes navegadores web realizan esta función de manera diferente- formas incluyen varias versiones de la misma para asegurar su reproducción en varios de ellos.

gt;gt;gt;gt;html {min-height: 100%- / * Esto es necesario para que el efecto de la pendiente consiste en la página entera * /}cuerpo {fondo: -webkit-lineal del gradiente(# 93B874, # C9DCB9)- / * Chrome 10+, Safari 5.1+ * /fondo: -El gradiente lineal(# 93B874, # C9DCB9)- / * * Opera 11.1+ /fondo: -MOZ-lineal del gradiente(# 93B874, # C9DCB9)- / * Firefox 3.6+ * /fondo: gradiente lineal(# 93B874, # C9DCB9)- / * Sintaxis estándar (debe ser dejado para el final) * /background-color: # 93B874- / * Es bueno elegir un color de fondo para el caso del efecto de degradado no se carga * /}gt;gt;gt;gt;gt;

Hacer un efecto de degradado direccional. Mediante la adición de una dirección en el sentido, se puede cambiar la forma de transición de colores. Los diferentes navegadores interpretan este cambio de diferentes maneras. Sin embargo, todas generan el mismo efecto.

gt;gt;gt;gt;html {min-height: 100%-}cuerpo {fondo: -webkit-lineal del gradiente(izquierda, # 93B874, # C9DCB9)- / * * Derecha Izquierda /fondo: -El gradiente lineal(derecho, # 93B874, # C9DCB9)- / * Derecho terminación * /fondo: -MOZ-lineal del gradiente(derecho, # 93B874, # C9DCB9)- / * Derecho terminación * /fondo: gradiente lineal(a derecho, # 93B874, # C9DCB9)- / * Ir a la derecha * /background-color: # 93B874- / * Es bueno elegir un color de fondo para el caso del efecto de degradado no se carga * /}gt;gt;gt;gt;gt;

Utilizar otras propiedades para ajustar el efecto de degradado. Hay muchas otras posibilidades para cambiarlo.

Por ejemplo, además de agregar más de dos colores, puede cambiar el porcentaje de cada uno, estableciendo la cantidad de espacio cada segmento está en la pantalla.

fondo: gradiente lineal(# 93B874 10%, # C9DCB9 70%, # 000000 90%)-

Si lo desea, también se puede añadir transparencia a la pantalla. Así que el color será cada vez se desvaneció. Elegir un solo tono para que se desvanezca. Para configurar estas opciones, utilice la función RGBA (). El valor final determina la transparencia: 0 para un color sólido y 1 a transparente.

fondo: gradiente lineal(a derecho, RGBA(147,184,116,0), RGBA(147,184,116,1))-

Vídeo: Cómo crear tu propia página web usando HTML : Cómo agregar color de fondo a una página web

Vídeo: COMO PONER MARQUEE(MARQUESINA) , COLOR DE FONDO Y TEXTO EN HTML / HTML TUTORIAL EN ESPAÑOL( PARTE 1)

De esta manera? Compartir en redes sociales:

Cómo establecer los colores de fondo en html

pasos

Vídeo: Cómo crear tu propia página web usando HTML : Cómo agregar color de fondo a una página web

Vídeo: COMO PONER MARQUEE(MARQUESINA) , COLOR DE FONDO Y TEXTO EN HTML / HTML TUTORIAL EN ESPAÑOL( PARTE 1)

Opiniones y Comentarios