Repita en antecedentes en CSS
Podemos realizar las siguientes funcionalidades utilizando la propiedad de repetición de fondo:
- sin repetición evita la repetición de la imagen.
- repetir-x repite una imagen en dirección horizontal.
- repetición repite una imagen en una dirección vertical.
- espacio repite la imagen sin recorte y se agregó espacio entre cada repetición
- redondo repite y estira la imagen sin agregar espacio
Este artículo discutirá todos los valores de propiedad de fondo mencionados anteriormente con ejemplos.
Ejemplo
Comencemos con la propiedad predeterminada de imagen de fondo.
El fragmento anterior proporcionará la siguiente salida:
Entonces, de forma predeterminada, la propiedad de la imagen de fondo repitió la imagen horizontal y verticalmente.
valor sin repetición
Veamos qué sucederá cuando un valor "Sin repetición" se asignará a la propiedad de repetición de fondo:
Ahora la imagen de fondo aparecerá solo una vez. Este ejemplo proporciona la siguiente salida:
Valor de repetición-x
Ahora asignemos "Repetir-x" a la propiedad de repetición de fondo y tenga en cuenta cómo funciona:
Observamos el impacto de "repetir-x" en la imagen de fondo en la siguiente salida:
De la salida anterior está claro que "Repetir-x" repite la imagen horizontalmente solo.
Valor de repetición
Del mismo modo, asignemos el repetición valor a la propiedad de repetición de fondo:
La pieza de código dada anterior producirá la siguiente salida:
La salida verifica que repetición repitió la imagen solo verticalmente.
valor de espacio
Utilicemos el "espacio" Valor para la propiedad de repetición de fondo para agregar los espacios uniformes entre las imágenes:
El script anterior proporcionará la siguiente salida:
valor redondo
Asignar el valor "redondo" a la propiedad de repetición de fondo se ajustará a la imagen de acuerdo con el tamaño de la pantalla:
Como resultado, obtendremos la siguiente salida:
Repetición de imagen de fondo múltiple
En CSS, se pueden agregar múltiples imágenes de fondo a un elemento y el siguiente ejemplo dado elaborará cómo controlar el comportamiento de repetición de múltiples imágenes utilizando la propiedad de repetición de fondo:
En el código anterior, la propiedad de imagen de fondo toma dos URL para agregar dos imágenes de fondo. En la siguiente línea, la propiedad de repetición de fondo también especifica dos valores I.mi. repetir y, repetir-x. repetir y repetirá la primera imagen verticalmente, mientras que repetir-x repetirá la segunda imagen horizontalmente:
Conclusión
La propiedad de repetición de fondo controla el comportamiento de repetición de la imagen de fondo. Determina si una imagen de fondo se repetirá o no si es así, ¿cómo, yo?.mi. vertical u horizontalmente.
Este artículo proporcionó una visión general exhaustiva de la propiedad de repetición de fondo en CSS. En primer lugar, determina cuáles son los valores que se pueden asignar a la propiedad de repetición de fondo. Posteriormente, explicó el funcionamiento de cada valor de repetición de fondo en detalle junto con los ejemplos.