Configuración de fondos

Aquí hay varias formas de configurar fondos en slidde.co. Los fondos CSS se pueden establecer en cualquier elemento en slidde.co.

Fondo de foto estática

Este es el caso de uso más común.

Un color de respaldo cuando tu imagen de fondo se está cargando o parte de tu imagen de fondo es transparente:

backgroundColor: #000

La URL de la imagen se puede cargar usando slidde.co. También puedes usar gradientes CSS aquí, y slidde.co proporciona algunos ajustes preestablecidos de gradientes de una manera sin código:

backgroundImage: url("your_image_url")

Puedes usar "cover" la mayoría de las veces para asegurarte de que tu fondo cubra todas las imágenes:

backgroundSize: cover

Si backgroundSize: "cover" oculta alguna parte importante de tu imagen, puedes ajustar sus posiciones:

backgroundPosition: 50% 10px

Si tu imagen de fondo no es un patrón repetible, puedes establecer esto en no-repeat:

backgroundRepeat: no-repeat

Controla si la imagen de fondo se mueve cuando desplazas hacia abajo una página. Por lo general, necesitarías una foto estática que no siga el desplazamiento porque cubre la página:

backgroundAttachment: fixed

Puedes consultar los documentos de MDN para obtener más información detallada.

Configuración de filtros en la imagen de fondo

Esto se aplica a Page Slide Container. Puedes hacer clic en Fondo avanzado y seleccionar imageElement. Creará un elemento HTML <div><img /></div> separado dentro del contenedor como el primer elemento.

Luego puedes aplicar propiedades CSS como filter a él. Por ejemplo, aquí hay 3 formas de crear más contraste entre la imagen de fondo y el texto en primer plano para mejorar la legibilidad.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Consulta los documentos de MDN para una introducción más detallada.

Fondos de patrones repetibles

Esto se aplica a Page Slide Container. Puedes hacer clic en Fondo avanzado y seleccionar un patrón.

1. Selecciona un tipo de patrón.
2. Luego puedes personalizar las opciones del patrón. Y puedes intentar hacer clic en el botón Inspírame para ver qué patrón aleatorio te ofrece.

Creará un elemento HTML separado <div><svg width="100%" height="100%" .../></div> dentro. Esto significa que también puedes ajustar sus propiedades CSS, como opacity, filter, o incluso backgroundImage para añadir un fondo degradado al elemento padre del svg. También puedes animar el SVG.

Fondos de video

Esto se aplica a Page Slide Container. Puedes hacer clic en Fondo avanzado y seleccionar YouTube. Creará un elemento HTML separado <div><iframe /></div> dentro para incrustar un video de YouTube. Puedes pegar tu enlace URL de YouTube allí.

Actualmente solo se permiten elementos de YouTube. Ya que proporciona una mejor optimización de transmisión que alojar nuestro propio video. Si necesitas subir un video personalizado, por favor háznoslo saber a través del botón de comentarios en la barra de navegación.

Animación de fondos

Si estás usando backgroundImage de CSS, entonces puedes animar fácilmente su backgroundPosition. Aquí tienes un ejemplo.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

También puedes animar otras propiedades CSS.

Sin embargo, si necesitas animar cosas como la opacity de CSS, no puedes animarla directamente. Ya que opacity se aplica a todo el elemento. Deberías usar imageElement en Fondo avanzado en su lugar, y establecer target a &>*:first-child para aplicarlo solo al elemento de imagen.