Fondos de CSS (fondo)
propiedades de fondo CSS se utilizan para definir el fondo de los elementos HTML.
propiedades CSS definen los efectos de fondo:
- background-color
- Imagen de fondo
- background-repeat
- background-attachment
- background-position
color de fondo
la propiedad background-color define el color de fondo del elemento.
El color de fondo de la página para su uso en el selector de cuerpo:
CSS, los valores de color se define generalmente de la siguiente manera:
- Hex - tales como: "# FF0000"
- RGB - tales como: "rgb (255,0,0)"
- - nombres de colores como: "rojo"
El siguiente ejemplo, h1, p, y elementos div tienen diferentes colores de fondo:
Ejemplos
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Trate »
imagen de fondo
atributo background-imagen describe los elementos de imagen de fondo.
Por defecto, la imagen de fondo es de baldosas aparece varias veces para cubrir toda la entidad elemento.
Página ejemplos ajuste de la imagen de fondo:
Aquí está un ejemplo de una mala combinación de la imagen de fondo del texto y. Texto sea difícil de leer:
Las imágenes de fondo - mosaico horizontal o vertical
De manera predeterminada, la propiedad Imagen de fondo es de baldosas en orientación horizontal o vertical de la página.
Si algunas imágenes en mosaico horizontal y verticalmente, por lo que se ve muy coordinada, de la siguiente manera:
Si un mosaico de imagen (repeat-x) solamente en la dirección horizontal, el fondo de la página será mejor:
Fondo de imagen - Establece la posición y no baldosas
Deje que la imagen de fondo no afecta a la disposición del texto
Si no desea que el mosaico de imágenes, puede utilizar la propiedad background-repeat:
El ejemplo anterior, la imagen de fondo y el texto aparece en el mismo lugar, con el fin de hacer que el diseño de la página más razonable, no afecta la lectura del texto, podemos cambiar la ubicación de la imagen.
propiedad de fondo posición se puede utilizar para cambiar la imagen en el fondo aquí:
Ejemplos
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Trate »
Antecedentes - propiedad abreviada
En el ejemplo anterior, podemos ver el color de fondo de la página a través de una gran cantidad de atributos para controlar.
Para simplificar el código para estas propiedades, podemos utilizar estos atributos se combinan en la misma propiedad.
color de fondo propiedad abreviada para el "fondo":
Cuando se utiliza la propiedad rápida, el orden de valores de atributos como ::
- background-color
- Imagen de fondo
- background-repeat
- background-attachment
- background-position
Todos estos atributos no tienen que utilizar, se puede usar de acuerdo a las necesidades reales de la página.
En este ejemplo se utiliza CSS se ha descrito anteriormente, se puede ver el ejemplo: Ejemplos CSS
más ejemplos
Cómo establecer una imagen de fondo fijo
Este ejemplo muestra cómo establecer una imagen de fondo fijo. La imagen no se desplazará con el resto de la página.
propiedades de fondo CSS
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |