Latest web development tutorials

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:

Ejemplos

body {background-color:#b0c4de;}

Trate »

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

h1 {background-color:#6495ed;}
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:

Ejemplos

body {background-image:url('paper.gif');}

Trate »

Aquí está un ejemplo de una mala combinación de la imagen de fondo del texto y. Texto sea difícil de leer:

Ejemplos

body {background-image:url('bgdesert.jpg');}

Trate »


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:

Ejemplos

body
{
background-image:url('gradient2.png');
}

Trate »

Si un mosaico de imagen (repeat-x) solamente en la dirección horizontal, el fondo de la página será mejor:

Ejemplos

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Trate »


Fondo de imagen - Establece la posición y no baldosas

observación 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:

Ejemplos

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Trate »

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

body
{
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":

Ejemplos

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Trate »

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


Ejemplos

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 设置背景图像是否及如何重复。