Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (IX)



10.8. Fondo

Dentro del modelo de cajas el fondo está formado por dos elementos opcionales, la imagen de fondo y el color de fondo. El contenido está delante de ambos. Por defecto, tanto la imagen como el color de fondo llegan hasta el border, a continuación tenemos el margin que separa esta caja de las adyacentes. En el siguiente esquema hemos representado todos estos elementos.

 

Margen negativo CSS

 

El contenido, la imagen de fondo y el color de fondo no pueden sobrepasar el border, que puede ser de color o transparente.

Como ya hemos visto entre el contenido y el border puede existir el padding. El padding es transparente.

Entre el border y la siguiente caja pueder existir un margin que es siempre transparente.

El contenido está siempre delante pero si tiene áreas transparentes, se puede ver lo que hay detrás. Por ejemplo el texto de las etiquetas p es transparente entre los caracteres y permite ver la imagen de fondo. Está a su vez puede tener áreas transparentes que permitan ver el color de fondo.

Por ejemplo, el siguiente párrafo tiene una imagen de fondo más grande que el área de contenido, por lo tanto la imagen se recorta. Además no se ve el color de fondo ya que la imagen no tiene zonas transparentes.

 

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

En cambio en el siguiente párrafo sí se ve el color de fondo ya que la imagen de fondo es más pequeña que el área de contenido y además hemos indicado que no se repita y se alinee a la derecha. A continuación vamos a ver cómo trabajar con los atributos de las imágenes de fondo que permiten hacer estas cosas.

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

 


Enero-2019 (V 2.0)
Pág. 10.9
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.