Fondo CSS frente a color de fondo
En este manual, aprenderemos la diferencia entre las propiedades de fondo y el color de fondo en detalle.
Empecemos!
Propiedad de fondo CSS
Para ajustar el fondo de cualquier elemento HTML, el CSS "fondoSe utiliza la propiedad. Es una propiedad en taquigrafía de ocho propiedades más, lo que significa que puede usarlas todas en una línea. Esas otras propiedades son:
- color de fondo
- imagen de fondo
- posición de fondo
- tamaño de fondo
- repetición
- origen
- clip de fondo
- atacamiento de antecedentes
Sintaxis
Aquí está la sintaxis de la propiedad de fondo:
Fondo: imagen de imagen de color/tamaño repetir el accesorio de clip de origenPasemos a la explicación de todas las propiedades mencionadas anteriormente una por una.
Propiedad de color de fondo CSS
Utilizando el "color de fondo"Propiedad, puede establecer el color del fondo. El color aparecerá detrás de los elementos HTML.
Sintaxis
La sintaxis de la propiedad de color de fondo es:
Color de fondo: colorEn lugar de "color", Puede establecer el color del fondo que desea aparecer detrás de los elementos.
Ejemplo
Primero, en el archivo HTML, crearemos un contenedor usando la etiqueta y luego agregaremos un encabezado y un párrafo.
Html
Linuxhint
Bienvenido a nuestro sitio web
En CSS, ajustaremos la altura del DIV como "100%"Para hacer que aparezca en toda la página y el tamaño de la fuente del texto como"xx-grande". Después de eso, establezca el color de fondo como "agua".
CSS
divAltura: 100%;
tamaño de fuente: XX-Large;
Color de fondo: Aqua;
En la imagen proporcionada a continuación, puede ver que se aplica el color de fondo:
Propiedad de imagen de fondo CSS
El "imagen de fondoLa propiedad se utiliza para establecer una o más imágenes como fondo de los elementos HTML. Puede utilizar esta propiedad para agregar diferentes imágenes de fondo para diferentes elementos.
Sintaxis
La sintaxis de la propiedad de imagen de fondo es:
IMAGEN DE ACTUALO: URL ()Aquí, da la ruta de la imagen que desea establecer como fondo como argumento al "url ()".
Ejemplo
En la continuación del ejemplo anterior, agregue una imagen de fondo en el "div" clase. Agregaremos la URL de la imagen como "URL (IMG.JPG)":
div…
IMAGEN DE ACTUALO: URL (IMG.jpg);
La salida proporcionada a continuación indica que la imagen de fondo se ha agregado correctamente:
Tenga en cuenta que la imagen se repite. Para resolver este problema, consulte la siguiente propiedad.
Propiedad de repetición de fondo CSS
Cuando agrega una imagen como fondo en una página web, se repite de forma predeterminada. Para evitar esta repetición y establecer el patrón de acuerdo con su elección, el "repeticiónSe utiliza la propiedad.
Sintaxis
La sintaxis de la propiedad de repetición de fondo es:
Repeat de fondo: repetir | repetir-x | repetirLa descripción de los valores establecidos de la propiedad de repetición de fondo se proporciona a continuación:
- repetir: Se utiliza para repetir la imagen en ambas direcciones, vertical y horizontal.
- repetir-x: Se usa para establecer la repetición de la imagen solo horizontalmente.
- repetir Especifica la repetición vertical de la imagen.
- Sin repetición: Se usa para evitar la repetición de la imagen.
Ejemplo
Aquí, estableceremos el valor de la propiedad de repetición de fondo como "sin repetición":
div…
Background-Repeat: sin repetición;
El resultado del código proporcionado anteriormente se da a continuación. Puedes ver que la imagen ya no se repite:
Propiedad de posposición de fondo CSS
Para establecer la posición de la imagen de fondo, el "posición de fondoSe utiliza la propiedad. Le permite ajustar la imagen en diferentes posiciones, como la parte superior izquierda, el centro izquierdo, la parte inferior izquierda, la parte superior derecha, el centro derecho y muchos más.
Sintaxis
La sintaxis de la propiedad de la posición de fondo es:
Posición de fondo: valorEn lugar de "valor", Puede especificar la posición de la imagen.
Ejemplo
Aquí, estableceremos la posición de fondo como "centro":
div…
Posición de fondo: centro;
En la salida a continuación, la imagen aparece en el centro de la página:
Propiedad de tamaño de fondo CSS
Para establecer el tamaño de la imagen de fondo, el "tamaño de fondoSe utiliza la propiedad.
Sintaxis
El tamaño de fondo tiene la siguiente sintaxis:
tamaño de fondo: longitud | cubiertaEl siguiente es la descripción de los valores de la propiedad de tamaño de fondo:
- longitud: Se usa para arreglar el ancho y la altura de la imagen de fondo.
- cubrir: Se utiliza para ajustar la imagen de fondo en todo el fondo.
Ejemplo
Estableceremos el tamaño del fondo como "100%"Altura y"80%" ancho:
div…
tamaño de fondo: 100% 80%;
Puede ver que la imagen se ha redimensionada en función de las dimensiones especificadas:
Propiedad de origen de fondo CSS
El "origenSe utiliza la propiedad para ajustar el área de posicionamiento de la imagen de fondo. La imagen se ajusta en la esquina superior izquierda como predeterminado.
Sintaxis
La sintaxis de la propiedad de origen de fondo es:
Originato de fondo: box de padding | border | box de contenidoLos valores de la propiedad de origen de fondo se describen a continuación:
- caja de relleno: Es el valor predeterminado de la propiedad de origen de fondo utilizado para ajustar la posición de la imagen de fondo de acuerdo con el borde del relleno.
- Border-Box: Se usa para establecer la imagen de acuerdo con la caja de borde de la imagen.
- Box de contenido: Se utiliza para establecer la imagen de fondo de acuerdo con el contenido de la imagen.
Nota: La propiedad de origen de fondo no funciona si el valor de la propiedad de unión de fondo se establece como "fijado".
Ejemplo
Primero, cree un borde alrededor del contenedor. Aquí, continuaremos el ejemplo anterior y estableceremos el valor de relleno como "10px". Después de eso, ajuste el ancho del borde como "15px", Estilo como"cresta", Y color como"RGB (1, 68, 68)". Al final, asignaremos el valor de la propiedad de origen de fondo como "buzón de contenido":
div…
relleno: 10px;
borde: 15px cresta RGB (1, 68, 68);
background-origin: content-box;
El resultado del código proporcionado anteriormente se da a continuación. Puede ver que la posición de la imagen se establece de acuerdo con el contenido del DIV:
Propiedad de clip de fondo CSS
El "clip de fondo"La propiedad funciona en el color de fondo del elemento. Le permite controlar hasta qué punto un color de fondo se extiende más allá de un elemento, como el relleno del elemento, su borde y su contenido.
Sintaxis
La sintaxis de la propiedad del clip de fondo es:
Original de fondo: border | caja de relleno | buzón de contenidoLos valores de la propiedad de origen de fondo se describen a continuación:
- Border-Box: Es el valor predeterminado de la propiedad de origen de fondo que se utiliza para establecer el color de fondo detrás del borde.
- caja de relleno: Se utiliza para ajustar el color dentro de la caja de acolchado del elemento.
- Box de contenido: Se usa para establecer el color de fondo de acuerdo con el contenido del elemento.
Ejemplo
Continuaremos el ejemplo anterior y cambiaremos el valor del estilo de borde a "punteado"Para comprender la propiedad del clip de fondo. Después de eso, estableceremos el valor de la propiedad del clip de fondo como "cajón de relleno":
div…
Clip de fondo: Box de relleno;
La salida significa que el color de fondo blanco se muestra cuando terminó el borde del borde:
Propiedad de atacamiento de fondo CSS
El "atacamiento de antecedentesLa propiedad se usa para ajustar el comportamiento o la imagen mientras desplaza la página. Su comportamiento se puede desplazar con otros elementos o fijos.
Sintaxis
La sintaxis de la propiedad de unión de fondo es:
Atacamiento de fondo: valorPuede establecer el valor de la unión de fondo como "fijado"Para arreglar la imagen de fondo o"Desplazarse"Para permitir que la imagen se desplace con la página.
Nota: Por defecto, el valor de la propiedad de unión de fondo se establece como "Desplazarse".
Se puede ver que la imagen de fondo agregada no es estática cuando nos hemos desplazado. Ahora solucionemos este problema.
Para hacerlo, establecemos el valor de la propiedad de unión de fondo como "fijado":
div…
Atacamiento de fondo: fijo;
Aquí está el resultado que demuestra que la imagen ha sido solucionada:
Ahora, dirígete hacia la comparación entre las propiedades de fondo y de fondo de fondo.
Fondo CSS frente a color de fondo
La tabla dada diferenciará las propiedades de fondo y color de fondo en la base de sus características:
| Características | Antecedentes de CSS | Color de fondo CSS |
| Tipo | Es una superpertención. | Es una subpropertía de propiedad de fondo. |
| Funcionalidad | Establece todas las propiedades de fondo. | Establece solo el color de fondo. |
| Rango | Admite todas las propiedades de fondo | Solo admite la propiedad de color de fondo |
| Nivel | Cuando necesita agregar múltiples valores de fondo, es fácil de usar. Puede establecer los valores de todas las propiedades de fondo a la vez. | Se puede utilizar cuando solo necesita agregar un solo color de fondo. |
| Sintaxis | Antecedentes: valores (Los valores son BG-Color, BG-Image y otras propiedades) | Color de fondo: color |
Se ha explicado cómo las propiedades del color de fondo difieren de las propiedades de fondo.
Conclusión
CSS "fondo"La propiedad es una propiedad abreviada utilizada para establecer múltiples valores de fondo a la vez, como color, imagen, posición, tamaño, origen y más. Por otro lado, "color de fondo"Solo se usa para agregar color al fondo. En esta guía, hemos discutido la diferencia entre la propiedad de fondo CSS y la propiedad de color CSS de fondo.