Fondos CSS

 

 

 

Fondos css 1

Aprenda a cambiar el fondo de un elemento usando CSS

El fondo de un elemento se puede cambiar usando varias propiedades CSS:

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

y la propiedad de taquigrafía background, que permite acortar las definiciones y agruparlas en una sola línea.

background-coloracepta un valor de color, que puede ser una de las palabras clave de color o un valor rgbo :hsl

 

p { background-color: yellow;}div { background-color: #333;}

En lugar de utilizar un color, puedes utilizar una imagen como fondo de un elemento, especificando la URL de ubicación de la imagen:

div { background-image: url(image.png);}

background-clipPermite determinar el área que utilizará la imagen o el color de fondo. El valor predeterminado es border-box, que se extiende hasta el borde exterior del borde.

Otros valores son

  • padding-boxpara extender el fondo hasta el borde de relleno, sin el borde
  • content-boxpara extender el fondo hasta el borde del contenido, sin el relleno
  • inheritpara aplicar el valor del padre

Al utilizar una imagen como fondo, deberá establecer la posición de la colocación de la imagen utilizando la background-positionpropiedad: left, right, centerson todos valores válidos para el eje X y top, bottompara el eje Y:

div { background-position: top right;}

Si la imagen es más pequeña que el fondo, debe configurar el comportamiento mediante background-repeat. ¿Debería ser repeat-x, repeat-yo repeaten todos los ejes? Este último es el valor predeterminado. Otro valor es no-repeat.

background-originle permite elegir dónde se debe aplicar el fondo: a todo el elemento incluido el relleno (predeterminado) usando padding-box, a todo el elemento incluido el borde usando border-box, al elemento sin el relleno usando content-box. Fotos Porno y actrices porno

Con background-attachmentpodemos adjuntar el fondo a la ventana gráfica, de modo que el desplazamiento no afecte al fondo:

div { background-attachment: fixed;}

Por defecto, el valor es scroll. Hay otro valor, local. La mejor forma de visualizar su comportamiento es este Codepen .

La última propiedad de fondo es background-size. Podemos usar 3 palabras clave: auto, covery contain. autoes el valor predeterminado.

coverexpande la imagen hasta que todo el elemento esté cubierto por el fondo.

containdeja de expandir la imagen de fondo cuando una dimensión (x o y) cubre todo el borde más pequeño de la imagen, por lo que queda completamente contenida en el elemento.

También puedes especificar un valor de longitud y, si es así, establece el ancho de la imagen de fondo (y la altura se define automáticamente):

div { background-size: 100%;}

Si especifica 2 valores, uno es el ancho y el segundo es la altura:

div { background-size: 800px 600px;}

La propiedad de taquigrafía background permite acortar definiciones y agruparlas en una sola línea.

Este es un ejemplo:

div { background: url(bg.png) top left no-repeat;}

Si usa una imagen y no se pudo cargar, puede establecer un color de respaldo:

div { background: url(image.png) yellow;}

También puedes establecer un degradado como fondo:

div { background: linear-gradient(#fff, #333);}

Tips de CSS




Tal vez te puede interesar:

  1. Filtros CSS
  2. Manejo de errores CSS
  3. Importar un archivo CSS usando @import
  4. Normalización de CSS

Fondos CSS

El fondo de un elemento se puede cambiar usando varias propiedades CSS: Aprenda a cambiar el fondo de un elemento usando CSS Aprenda a cambiar el fondo de un e

programar

es

https://aprendeprogramando.es/static/images/programar-fondos-css-2076-0.jpg

2024-11-01

 

Fondos css 1
Fondos css 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences