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 CSS

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 preajustes de gradiente de una manera sin código:

backgroundImage: url("your_image_url")

Puedes usar "cover" la mayoría de las veces para asegurar 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 en una página. Usualmente, 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 información más detallada

Animación de fondos

Si estás usando backgroundImage de CSS, entonces puedes animar fácilmente su backgroundPosition. Aquí hay 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.

Fondos avanzados

Esto se aplica a Page Slide Container. Puedes hacer clic en Fondo avanzado y seleccionar las siguientes opciones.

Fondos de elementos de imagen - Configuración de filtros en la imagen de fondo

Haz clic en Fondo avanzado y selecciona imageElement. Creará un elemento HTML separado <div><img /></div> dentro del contenedor como el primer elemento.

Luego puedes aplicar propiedades CSS como filtro a este. Por ejemplo, aquí hay 3 maneras 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 la documentación de MDN para una introducción más detallada.

Fondos animados

Haz clic en Fondo avanzado y selecciona animated.

Hay varios preajustes de fondos animados que puedes elegir.

Por lo general, puedes configurar el backgroundColor backgroundImage del fondo animado. Algunos preajustes también tienen variables css que te permiten configurar el color, el espaciado o la duración de la animación.

Fondos de patrones repetibles

Haz clic en Fondo avanzado y selecciona pattern.

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 Insipre me para ver qué patrón aleatorio te da.

Creará un elemento HTML separado <div><svg width="100%" height="100%" .../></div> dentro. Eso significa que también puedes ajustar sus propiedades css, como opacity, filter, o incluso backgroundImage para agregar un fondo degradado al elemento padre svg. Y también puedes animar el SVG.

Fondos de video de YouTube

Haz clic en Fondo avanzado y selecciona youtubeElement. 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.