Ställa in bakgrunder

Last updated on 11/1/2024@mrbirddev

Här är flera sätt att ställa in bakgrunder på slidde.co. CSS-bakgrunder kan ställas in på vilket element som helst i slidde.co

CSS-bakgrund

Detta är det vanligaste användningsfallet.

En reservfärg när din bakgrundsbild laddas eller en del av din bakgrundsbild är transparent:

backgroundColor: #000

Bild-URL:en kan laddas upp med slidde.co. Du kan också använda CSS-gradienter här, och slidde.co tillhandahåller några gradientförinställningar på ett kodfritt sätt:

backgroundImage: url("your_image_url")

Du kan använda "cover" för det mesta för att säkerställa att din bakgrund täcker alla bilder:

backgroundSize: cover

Om backgroundSize: "cover" döljer någon viktig del av din bild, kan du justera deras positioner:

backgroundPosition: 50% 10px

Om din bakgrundsbild inte är ett upprepbart mönster kan du ställa in detta till no-repeat:

backgroundRepeat: no-repeat

Styr om bakgrundsbilden rör sig när du bläddrar ner på en sida. Vanligtvis skulle du behöva ett statiskt foto som inte följer rullningen eftersom det täcker sidan:

backgroundAttachment: fixed

Du kan kolla MDN-dokumentationen för mer djupgående information

Animering av bakgrunder

Om du använder CSS backgroundImage, kan du enkelt animera dess backgroundPosition. Här är ett exempel.

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

Du kan också animera andra CSS-egenskaper.

Men om du behöver animera saker som CSS opacity, kan du inte direkt animera det. Eftersom opacity gäller för hela elementet. Du bör istället använda imageElement i Avancerad bakgrund och ställa in target till &>*:first-child för att tillämpa det endast på bildelementet.

Avancerade bakgrunder

Detta gäller för Page Slide Container. Du kan klicka på Avancerad bakgrund och välja följande alternativ.

Bildbakgrunder - Ställa in filter på bakgrundsbild

Klicka på Avancerad bakgrund och välj imageElement. Det kommer att skapa ett separat HTML-<div><img /></div>-element inuti containern som det första elementet.

Sedan kan du tillämpa CSS-egenskaper som filter på det. Till exempel, här är 3 sätt att skapa mer kontrast mellan bakgrundsbilden och förgrundstexten för att förbättra läsbarheten.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Kolla MDN-dokumentationen för en mer djupgående introduktion.

Animerade bakgrunder

Klicka på Avancerad bakgrund och välj animated.

Det finns olika förinställningar för animerade bakgrunder att välja mellan.

Vanligtvis kan du konfigurera backgroundColor backgroundImage för den animerade bakgrunden. Vissa förinställningar har också css-variabler som låter dig konfigurera färg, avstånd eller animationens varaktighet.

Upprepningsbara mönsterbakgrunder

Klicka på Avancerad bakgrund och välj pattern.

Välj en mönstertyp
Sedan kan du anpassa mönstrets alternativ. Och du kan prova att klicka på knappen Insipre me för att se vilket slumpmässigt mönster det ger dig.

Det kommer att skapa ett separat HTML-<div><svg width="100%" height="100%" .../></div>-element inuti. Det betyder att du kan justera dess css-egenskaper också, som opacity, filter, eller till och med backgroundImage för att lägga till en gradientbakgrund till svg-föräldraelementet. Och du kan också animera SVG:n.

YouTube-videobakgrunder

Klicka på Avancerad bakgrund och välj youtubeElement. Det kommer att skapa ett separat HTML-<div><iframe /></div>-element inuti för att bädda in en YouTube-video. Du kan klistra in din YouTube-URL-länk där.

För närvarande är endast YouTube-element tillåtna. Eftersom det ger bättre strömningsoptimering än att vara värd för vår egen video. Om du behöver anpassad videouppladdning, vänligen låt oss veta genom feedback-knappen i navigeringsfältet.