Home-theater-designers
Uno de los momentos más emocionantes en la carrera de cualquier desarrollador front-end en ciernes es aprender a cambiar el color de fondo de una página web.
Trabajar con HTML es genial y todo, pero con solo unas pocas líneas de CSS puede hacer que sus páginas y su viaje de programación cobren vida.
Esta guía cubrirá todo lo que necesita saber sobre cómo cambiar el color de fondo con CSS.
Prepararse
Hagamos un pequeño trabajo preliminar.
cómo mejorar el rendimiento de los juegos de la computadora portátil con windows 10
Nota : Recomiendo usar Código de Visual Studio con el Extensión del servidor en vivo para ver los cambios en tiempo real a medida que actualiza el HTML y CSS.
- Crea una carpeta para los archivos de tu proyecto.
- Crear un index.html archivo para albergar su HTML. Puede usar un código repetitivo o simplemente configurar algunos , , y etiquetas.
- Crear un styles.css archivo para su CSS.
- Vincula tu archivo CSS con el HTML colocando dentro de etiquetas.
Ahora está listo para comenzar a editar el CSS.
Relacionado: Cómo crear un sitio web estándar
Cómo cambiar el color de fondo con CSS
La forma más sencilla de cambiar el color de fondo es apuntar al cuerpo etiqueta. Luego, edite el color de fondo propiedad. Puede encontrar códigos de color buscando y utilizando la extensión del navegador Google Color Picker
|_+_|Este código cambia el fondo a un bonito azul claro.
los color de fondo La propiedad acepta colores en seis formas diferentes:
- nombre : azul celeste; (para una aproximación cercana)
- código hexadecimal : # bfd6ff;
- rgb : rgb (191, 214, 255);
- rgba : rgba (191, 214, 255, 1); dónde a es alfa (opacidad)
- HSL : hsl (218 °, 100%, 87%);
- HSLA : hsla (218 °, 100%, 87%, 1); dónde a es alfa (opacidad)
Usa la taquigrafía antecedentes propiedad en lugar de color de fondo para cortar código adicional. Puede cambiar el color de fondo de cualquier elemento HTML utilizando este método.
Crear un elemento y darle una clase; en este caso, la clase es panel . Establecer su altura y ancho propiedades en CSS. Seleccione el elemento en CSS y elimine el color.
|_+_|Aquí puedes ver el cuerpo antecedentes La propiedad tiene un estilo independiente del .panel antecedentes propiedad.
La propiedad de fondo también acepta degradados:
|_+_|Cómo cambiar la imagen de fondo en CSS
¿Qué sucede si desea que el fondo sea una imagen en lugar de un color sólido o degradado? La taquigrafía antecedentes La propiedad es un amigo familiar.
Asegúrese de que la imagen esté en la misma carpeta que sus archivos HTML y CSS. De lo contrario, tendrá que usar la ruta del archivo entre paréntesis en lugar de solo el nombre:
|_+_|¡Vaya! Parece que la imagen está demasiado ampliada. Puedes solucionarlo con el tamaño de fondo propiedad.
|_+_|Para usar la taquigrafía antecedentes propiedad en conjunto con el tamaño de fondo propiedad cubrir , también debe especificar posición de fondo propiedades y separe los valores con una barra invertida (incluso si son valores posicionales predeterminados como arriba a la izquierda .)
|_+_|¡Ahí tienes! Una imagen de fondo del tamaño adecuado en una línea de CSS.
Lee mas: Cómo configurar una imagen de fondo en CSS
Nota : Tenga cuidado de no incluir imágenes de fondo de gran tamaño que ocupen mucho espacio de almacenamiento. Estos pueden ser difíciles de cargar en dispositivos móviles, donde tiene dos segundos para darles a los usuarios una razón para permanecer en la página.
Mejora tu juego CSS con CSS box-shadow
Para un desarrollador como usted, las propiedades de color de fondo e imagen de fondo son noticias viejas. Afortunadamente, siempre hay algo nuevo que aprender.
Intente darle un impulso a sus cajas con CSS box-shadow. ¡Sus elementos HTML nunca se vieron mejor!
Cuota Cuota Pío Correo electrónico Cómo usar CSS box-shadow: 13 trucos y ejemplosLas cajas anodinas se ven aburridas. ¡Arréglelos con el efecto de sombra de caja CSS!
Leer siguiente Temas relacionados- Programación
- Desarrollo web
- Web Design
- CSS
Marcus es un entusiasta de la tecnología de toda la vida y editor escritor en MUO. Se embarcó en su carrera de escritor independiente en 2020, cubriendo tendencias en tecnología, gadgets, aplicaciones y software. Estudió Ciencias de la Computación en la universidad con un enfoque en el desarrollo web front-end.
Más de Marcus Mears IIISuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse