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.
Lista A
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 |
 |
| 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 |
 |
| 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
Lista D
La figura D nos muestra cómo se ve.
| Figura D |
 |
| 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 |
 |
| 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 |
 |
| 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!
