DESARROLLADOR

Control preciso sobre fondos de página y elementos con CSS

Fondos de página y elementos con CSS

Antes de CSS, los desarrolladores web. Fondos de página y elementos. Por supuesto que pueden usar la propiedad de fondo
Imágenes de mosaico en toda la página, pueden controlar el color de fondo
Imagen con atributo bgcolor.
Pero su control termina allí; por ejemplo, no pueden ajustar
Posición de las imágenes de fondo de la página, mosaico de control o creación de páginas
filigrana.

CSS cambia todo esto, haciendo preciso
Controla los fondos de las páginas y los elementos a través de su serie de directivas background-*.
Además de proporcionar una funcionalidad muy mejorada, el uso de directivas CSS
El control de fondo tiene muchas otras ventajas: no requiere ninguna
Software especial que funciona con la mayoría de los principales navegadores y permite un control centralizado
Sobre la imagen de fondo y el color de la web.

¿suena bien?Luego siga leyendo, ya que este artículo examina
La propiedad de fondo de CSS, que ofrece una alternativa a la antigua propiedad de fondo, es una gran herramienta para manipular la posición, el color, la posición y la
Coloca mosaicos en tu página y fondos de elementos.

controlar el color de fondo

Primero, echemos un vistazo a la propiedad background-color, que define el color de fondo del elemento.
Funciona.Este comando acepta valores RGB en hexadecimal
símbolos o «palabras de color» como rojo,
plateado o azul.lista
A muestra un ejemplo.

LEER  Todo sobre la automatización: inmersión profunda en la automatización por una gran causa

Lista A

William Shakespeare dijo:
Existir o no existir, esa es la cuestión.

La figura A muestra cómo se ve.

Figura A
Listado de un ejemplo

controlar la imagen de fondo

Si desea una imagen de fondo en lugar de un color sólido,
Vaya a la directiva de imagen de fondo,
Le permite especificar la URL de la imagen que desea utilizar como fondo (Listado B).

Lista B

La figura B lo muestra
me gusta.

Figura B
1667153484 926 Control preciso sobre fondos de pagina y elementos con CSS
Listado B ejemplo

También puede especificar esto para elementos específicos como
Ejemplo de listado C.

Listado C

y figura C
Salida de pantalla.

Figura C
1667153485 638 Control preciso sobre fondos de pagina y elementos con CSS
Ejemplo de listado C

Controlar la repetición de la imagen de fondo

Por defecto, la directiva de imagen de fondo
Coloca la imagen en mosaico horizontal y verticalmente en el elemento seleccionado.
Por lo general, esto no es lo que desea; si, como en el ejemplo anterior, está utilizando
el logotipo de su empresa como fondo y solo desea que aparezca una vez, o si su
Las imágenes de fondo solo se utilizan para mosaicos verticales.por todos estos
En algunos casos, CSS proporciona la directiva de repetición de fondo,
Acepta uno de cuatro valores posibles: repetir-x (mosaico solo horizontalmente), repetir-y (mosaico verticalmente solo), no-repeat (sin mosaico) y repetir (mosaico tanto horizontal como verticalmente)
vertical).

Para ver esto en acción, considere el ejemplo en el Listado D, que desactiva el mosaico
primero

y coloque el logotipo en mosaico horizontalmente en el segundo.

Lista D

La figura D nos muestra cómo se ve.

Figura D
1667153485 194 Control preciso sobre fondos de pagina y elementos con CSS
Listado D ejemplo

Controlar la posición de la imagen de fondo

También puedes controlar la posición del fondo.
La imagen es relativa al elemento en el que se encuentra. directiva de posición de fondo
Acepte coordenadas de ubicación como porcentaje o longitud, o por palabra clave
Por ejemplo arriba, abajo, izquierda, derecha y centro.Para entender cómo funciona esto, considere
Ejemplo en el Listado E, donde
Contiene la imagen de fondo en la esquina inferior derecha del elemento.

Lista E

La figura E nos muestra cómo se ve.

Figura E
1667153486 455 Control preciso sobre fondos de pagina y elementos con CSS
Listado E ejemplo

No hace falta decir que esta directiva es muy útil en las siguientes situaciones
Coloque una sola imagen de fondo en una página web, como el logotipo de una empresa.

Controlar el desplazamiento de la imagen de fondo

Finalmente, CSS también te permite definir si el fondo
Al desplazarse por el elemento contenedor, la imagen se desplaza.esto tiene aplicacion
Se utiliza principalmente para agregar marcas de agua a las páginas web.El comando utilizado es el comando background-attachment.
Acepta valores móviles o fijos que se explican por sí mismos.lista
F es un ejemplo de cómo se puede utilizar para generar una marca de agua que siempre es
aparece en la esquina superior derecha de la página.

Lista F

El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí.

El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí.

El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí. El contenido está aquí.

Ahora, cuando intente desplazarse hacia abajo en esta página,
La imagen en la esquina superior derecha permanecerá fija en relación con la ventana del navegador, y
No se desplaza hacia abajo con el resto del contenido de la página. (Figura F)

Figura F
1667153486 392 Control preciso sobre fondos de pagina y elementos con CSS
Listado F ejemplo

Por supuesto, estos ejemplos son solo la punta del iceberg.
Cuando se trata de fondos en CSS.Pero deberían darte
Algunas ideas sobre cómo funcionan estas propiedades en la práctica, ahora debería
Sepa lo suficiente como para comenzar a probarlo usted mismo. ¿Entonces, Qué esperas? Empecemos… ¡feliz codificación!

LEER  Cómo personalizar la configuración de PowerShell mediante archivos de configuración

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba