Share
Hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..
En este tutorial, veremos una de las propiedades CSS más antiguas y familiares: fondo. fondo es una de varias propiedades de CSS cuyas características a menudo se pasan por alto. De hecho, vio una actualización con CSS3, recibiendo nuevas capacidades más allá de solo agregar una imagen de fondo o color. Echemos un vistazo a algunos de ellos!
Posicionar un gráfico de fondo es sencillo y es probable que ya conozcas algo. Si queremos colocar el fondo en la parte inferior derecha del elemento, aplicamos abajo a la derecha a posición de fondo. Por ejemplo:
#workspace ancho: 100%; ancho máximo: 668px; altura: 400px; color de fondo: # 525d62; imagen de fondo: url (images / macbook.png); repetición de fondo: no repetición; posición de fondo: abajo a la derecha;
O, con la taquigrafía., fondo, después de la definición de url:
#workspace ancho: 100%; ancho máximo: 668px; altura: 400px; fondo: # 525d62 url (images / macbook.png) parte inferior derecha sin repetir;
Desde la llegada de CSS3 hemos podido especificar la posición compensar; Las distancias precisas a las posiciones establecidas. Tomando nuestro ejemplo de abajo a la derecha, incluimos abajo 20px derecha 30px para posicionar nuestros antecedentes en 20px desde la parte inferior y 30px desde la izquierda.
#workspace ancho: 100%; ancho máximo: 668px; altura: 400px; color de fondo: # 525d62; imagen de fondo: url (images / macbook.png); repetición de fondo: no repetición; posición de fondo: derecha 30px inferior 20px;
Las posiciones (fondo, parte superior, Correcto, izquierda) puede definirse en cualquier orden, pero la longitud de desplazamiento debe definirse después cada posición de fondo.
El crédito es para Metin Kazan por las ilustraciones..
los fondo La propiedad también nos permite agregar múltiples imágenes de fondo. Por lo tanto, vamos a ampliar nuestro ejemplo anterior con más cosas y gadgets.
Añadimos estas imágenes a una sola. fondo o imagen de fondo Declaración mediante la separación de cada uno con una coma. Usamos el posición de fondo propiedad, que también acepta múltiples valores, para controlar cada una de esas imágenes de fondo.
#workspace altura: 400px; color de fondo: # 525d62; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); repetición de fondo: no repetición; posición de fondo: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * coffee.png * / 7% 280px; / * camera.png * /
Podemos usar unidades fijas (como píxeles), unidades flexibles (como porcentajes) o una combinación de las dos.
Cada par de valores representa coordenadas de la arriba a la izquierda del elemento contenedor, a la arriba a la izquierda de la imagen. Por ejemplo, la parte superior izquierda de la imagen de la cámara es 280 px desde la parte superior del contenedor, luego el 7% de la imagen de la cámara. disponible ancho a través de la izquierda.
Nota: Los disponible ancho es el ancho total del elemento contenedor, menos el ancho de la imagen de fondo. Por lo tanto, una imagen de fondo posicionada al 50% a lo largo del eje x aparece exactamente centrada!
Además, desde la posición de fondo es una propiedad animable, podemos crear un fondo más vivo y convincente:
#workspace width: 600px; altura: 400px; color de fondo: # 525d62; repetición de fondo: no repetición; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); posición de fondo: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; Animación: 3s facilidad 0s inView hacia adelante; @keyframes inView 0% background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; posición de fondo-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; posición de fondo-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; posición de fondo-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; posición de fondo-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; posición de fondo-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; posición de fondo-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Aquí hemos configurado una serie de fotogramas clave a lo largo de una línea de tiempo. En cada fotograma clave hemos alterado el posición-fondo-x y posición de fondo-y de cada imagen de fondo. La animación es ciertamente rudimentaria, así que por favor amablemente bifurque CodePen y mejore!
Nota: Hacer clic Repetición En la parte inferior derecha de la pluma para ver la animación.
Los fondos que utilizamos están ordenados secuencialmente; la primera lista aparece en la parte superior de la pila, mientras que la última lista aparecerá en la parte inferior de la pila de fondo.
#workspace width: 600px; altura: 400px; color de fondo: # 525d62; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); / * apilados en la parte inferior * / repetición de fondo: no-repetición;
Todas las sub-propiedades de fondo (repetición de fondo, tamaño de fondo, posición de fondo etc.) se pueden definir varias veces, excepto color de fondo. Si aplicamos múltiples fondos utilizando la taquigrafía. fondo propiedad, defina el color de fondo como el último valor que tendrá efecto. Por ejemplo:
#workspace altura: 400px; fondo: url (images / macbook.png) 50% 50% de no repetición, url (images / mouse.png) 430px 295px de no repetición, url (images / camera.png) 425px 230px de no repetición # 525d62;
Alternativamente, agregue un separado color de fondo, posterior a la propiedad de la mano corta:
#workspace width: 600px; altura: 400px; fondo: url (images / macbook.png) 50% 50% sin repetición, url (images / mouse.png) 430px 295px sin repetición, url (images / camera.png) 425px 230px sin repetición; color de fondo: # 525d62;
Ambos códigos hacen lo mismo, pero este último me parece más intuitivo y legible.
los modo de mezcla de fondo hace lo mismo que encontrarás en aplicaciones gráficas como Photoshop o Gimp; combina imágenes de fondo entre sí, así como con lo que haya debajo.
los modo de mezcla de fondo toma valores familiares como cubrir y multiplicar Entre otros, Jonathan Cutrell hace un trabajo fantástico de explicación en su tutorial sobre el tema. Le recomiendo que lo lea detenidamente para que podamos ver algunos ejemplos prácticos..
Hay varias formas de usar el modo de mezcla CSS para crear diseños sorprendentes, como combinar un degradado con una imagen, que Ian Yates señala en su resumen de inspiración:
Para crear este efecto, agregamos una imagen de fondo y un degradado, y aplicamos el cubrir modo de mezcla.
Accentsconagua
#blend background-repeat: no-repeat; imagen de fondo: url ('img / people-15.jpg'), gradiente lineal (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); modo de mezcla de fondo: superposición; La superposición afecta a los dos fondos que se enumeran aquí, por lo que es posible que deba tener cuidado si no desea que todo se mezcle. Si queremos evitar que todo se mezcle con el color de fondo, establezca el segundo valor en normal que se aplicará a nuestra segunda imagen de fondo.
#blend background-repeat: no-repeat; imagen de fondo: url ('… /img/people-15.jpg'), gradiente lineal (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); color de fondo: amarillo; modo de mezcla de fondo: superposición, normal; los clip de fondo La propiedad es una utilidad que controla cómo el color de fondo y el lapso de la imagen dentro del modelo de cuadro de contenido CSS. Similar a tamaño de caja propiedad, la clip de fondo La propiedad toma tres valores válidos, a saber:
casillero es el valor predeterminado que abarca la imagen de fondo o el color hasta el borde exterior del elemento.caja de relleno abarcará el fondo hasta el borde exterior del relleno, o en otras palabras; el borde interior del borde.caja de contenido conservará el fondo dentro del contenido del elemento como se muestra a continuación:Un ejemplo práctico donde he encontrado. clip de fondo ser útil es cuando tengo que crear un botón con un icono, usando un solo elemento. En la siguiente demostración, nuestra imagen se extiende desde el borde izquierdo al derecho del elemento, incluso si agregamos relleno en cada lado, ya que todavía se aplica casillero.
Si queremos rodear el icono con un poco de espacio en blanco, tradicionalmente tendríamos que envolverlo con otro elemento y aplicar un relleno en ese elemento adicional. Utilizando la clip de fondo propiedad, podemos hacerlo elegantemente configurándolo caja de contenido, y sustituir el relleno con bordes del mismo color que el color de fondo.
los fondo La propiedad es una que usamos frecuentemente en nuestros proyectos. Espero que este artículo le haya recordado sus amplios y variados usos, y espero escuchar más ideas en los comentarios..
Una nota final: el soporte del navegador para estas propiedades (con la excepción de modo de mezcla de fondo) son geniales. Según CanIUse, se admiten múltiples fondos desde Internet Explorer 9 en adelante, con solo un par de problemas triviales. Opciones de imagen de fondo, como la clip de fondo propiedad, es casi tan buena.
Los modos de fusión, al momento de escribir, funcionan mejor en Chrome, Opera, son parcialmente aplicables en Safari debido a algunos errores, pero lamentablemente no parecen haber hecho ningún progreso con Microsoft Edge.
