Fondo de CSS (Fondo)

Los atributos de fondo de CSS se utilizan para definir el estilo de fondo de un elemento. CSS fondo se refiere a la configuración de atributos de fondo a través de CSS, como la configuración de diferentes estilos de fondo a través de CSS.

Atributos de fondo

CSS proporciona varios atributos para el fondo de un elemento, como:background-color,background-image,background-repeat,background-attachmentybackground-positionLa próxima sección explicará cómo usar estas propiedades para establecer diferentes estilos de fondo.

Color de fondo

background-colorLa propiedad se utiliza para establecer el color de fondo del elemento.

El siguiente ejemplo muestra cómo establecer el color de fondo de una página web.

body {background-color:　#f0e68c;}

Los colores en CSS se especifican generalmente de la siguiente manera:

• Valores hexadecimales-por ejemplo "#ff0000"

• Valores RGB-por ejemplo "rgb（255,0,0）

• Nombres de colores-como "rojo"

VerNombres de colores CSSpara obtener una lista completa de nombres de colores posibles.

Imagen de fondo

background-imageLa propiedad establece la imagen de fondo del elemento HTML.

Vea el siguiente ejemplo, que muestra cómo establecer la imagen de fondo de una página.

body {background-image: url("leaf.jpg");

repetición de fondo

Por defecto, labackground-imagepropiedad, se repite la imagen en ambas direcciones, horizontal y vertical.

Al usarbackground-repeatLa propiedad le permite controlar cómo se repetirá la imagen de fondo en el fondo del elemento HTML. Puede establecer una repetición vertical (eje y), horizontal (eje x), bidireccional o repetición bidireccional.

Vea el siguiente ejemplo, que muestra cómo establecer el fondo degradado de una página web mediante la repetición horizontal de la imagen.

body　{
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

Adjunto de fondo

background-attachmentLa propiedad determina si la imagen de fondo está fija en relación con la ventana de visualización o se desplaza junto con el contenedor.

body　{
　　　　width:　250px;
　　　　height:　200px;
　　　　overflow:　scroll;
　　　　background-image:　url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

Posición de fondo

background-positionpropiedad se utiliza para controlar la posición de la imagen de fondo.

Si nobackground-positionespecificado, la imagen se colocará en la posición superior izquierda predeterminada del elemento, es decir(0,0). Consulte los siguientes ejemplos:

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

En el siguiente ejemplo, la imagen de fondo está ubicada en la esquina superior derecha y la posición de la imagen sebackground-positionpropiedad especificada.

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

Abreviatura de propiedades de fondo

Como se puede ver en el ejemplo anterior, al manejar el fondo, es necesario considerar muchas propiedades. También se puede especificar todos estos atributos en una sola propiedad para acortar el código. Esto se llama propiedad abreviada.

debackgroundLas propiedades son para configurar todas las propiedades individuales de fondo (es decir, las propiedades abreviadas)background-color,background-image,background-repeat,background-attachmentybackground-position）En una. Por ejemplo:

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

Al usar la abreviatura, el ejemplo anterior se puede escribir:

body　{fondo:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

UsobackgroundCuando se usa la propiedad abreviada, el orden de los valores de la propiedad debe ser.

Fondo:Color Imagen Repetición Adjunto Posición ;

Si falta o no se especifica el valor de un solo atributo de fondo al usar el símbolo de abreviatura, se utilizará el valor predeterminado de ese atributo (si hay uno).