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.

Statisk fotobakgrund

Detta är det vanligaste användningsfallet.

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

backgroundColor: #000

Bildens URL 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 behöver du en statisk bild som inte följer rullningen eftersom den täcker sidan:

backgroundAttachment: fixed

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

Ställa in filter på bakgrundsbild

Detta gäller för Page Slide Container. Du kan klicka på Avancerad bakgrund och välja imageElement. Det kommer att skapa ett separat HTML-<div><img /></div>-element inuti behållaren 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.

Upprepningsbara Mönsterbakgrunder

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

Välj en mönstertyp
Sedan kan du anpassa mönstrets alternativ. Du kan också 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älderelementet. Och du kan också animera SVG:n.

Videobakgrunder

Detta gäller för Page Slide Container. Du kan klicka på Avancerad bakgrund och välja YouTube. 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 ladda upp en anpassad video, vänligen meddela oss via feedback-knappen i navigeringsfältet.

Animerande 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 animera det direkt. Eftersom opacity gäller för hela elementet. Du bör använda imageElement i Avancerad bakgrund istället och ställa in target till &>*:first-child för att tillämpa det endast på bildelementet.