Bakgrundsstilar - Webflow hjälp
En översikt över de bakgrundsstilar du kan ställa in på ett element: färg, bilder, gradienter, färgöverlägg och videor.
Bakgrundsfärg
Du kan ställa in en bakgrundsfärg på vilket element som helst förutom bilder och videor (även om du kan använda bilder och videor som bakgrunder). Lägg till en bakgrundsfärg genom att ange ett färgvärde (t.ex. hex, rgba eller färgnamn) eller genom att använda färgväljaren. Du kan också lägga till bakgrundsfärg till textelement eller specifikt textinnehåll inuti ett textelement.
Om du vill att bakgrundsfärger ska vara konsekventa på hela din webbplats, använd taggen Body (Alla sidor) för arv. Styla den genom att välja Body-elementet och välja taggen i Stilpanelen eller använda arvmenyn. Alla ändringar i Body (Alla sidor) kommer att vara standard för nya element.
De flesta element har en transparent bakgrund som standard. Vissa element, som Slider-komponenten, har en standardfärg som du kan åsidosätta.
Bakgrundsbild
Webflow erbjuder många alternativ för att anpassa din bakgrundsbild.
För att lägga till eller ändra bakgrundsbilden:
- Bläddra till Bakgrunder i Stilpanelen
- Klicka på Välj bild från Resurspanelen
- Markera rutan för @2x för skarpare bilder på HiDPI-enheter
För att ställa in en bakgrundsvideo, använd bakgrundsvideokomponenten i Lägg till-panelen.
Bakgrundsbildstorlek
- Anpassad: Ställ in bredd/höjd eller procentvärden. Skala större med värden över 100%.
- Täcka: Fyller och täcker bakgrunden, kan trimma bilden.
- Innehålla: Håller bilden inom elementet.
Bakgrundsbildens position
Standard är övre vänstra hörnet. Du kan manuellt justera positioner (px, %, VW, VH).
Upprepa
Bakgrundsbilder upprepas både vertikalt och horisontellt som standard. Kontrollera för att upprepa horisontellt, vertikalt eller inte alls.
Fast eller rullande
Välj Inte fast (bild rullar) eller Fast (bild stannar på plats). Fasta bilder begränsas av vyporten.
Gradienter
Gradienter kan användas ensamma eller lagras på bakgrundsfärg/bild. Två typer:
- Linjära gradienter
- Radiella gradienter
Båda har stopp (punkter) där färger tonar.
Linjär gradient
Ställ in riktning med vinkel via ratt, pilar (45-graders steg) eller fältinmatning.
Gradientstopp
Redigera färg/opacitet vid stopp. Lager över bild gör bilden synlig vid lägre opacitet. Lägg till stopp genom att klicka. Ta bort genom att dra ut.
Upprepa
Växla för att upprepa gradienten.
Omvänd
Ikon för att omvända stopppositioner.
Radiell gradient
Skapar cirkulär gradient. Vänstra stoppet är färgen i mitten.
Position
Välj fokuspunkt via punkter eller manuellt med värden/enheter.
Storlek
Förinställda kontroller:
- Närmaste sida: centrum till närmaste sida
- Närmaste hörn: centrum till närmaste hörn
- Längsta sida: centrum till längsta sida
- Längsta hörn: (standard)
Färgöverlägg
Lägg till färgöverlägg på bakgrunder med färgväljare och opacitet.
Lagra bilder och gradienter
Stapla flera bakgrundsbilder, gradienter och överlägg för effekt. Ändra ordning med drag, växla synlighet med ögonikon, ta bort med papperskorg.
Bakgrundsvideo
Bakgrundsvideor är tysta, loopande videor för bakgrunder för att lägga till filmisk känsla. Var medveten om:
Lägg till med Snabbsök (CMD/CTRL+E) eller Lägg till-panel > Komponenter. Ladda upp din video (<30MB; webm, mp4, mov, ogg). Filnamn bör undvika mellanslag/specialtecken.
Transkodning sker efter uppladdning (mp4 & webm för webbläsarstöd).
Videoinställningar
- Loopvideo: upprepas kontinuerligt.
- Autoplayvideo: startar vid sidladdning.
- Inkludera play/pause-knapp: besökare kan styra uppspelning.
Förhandsgranska bakgrundsvideon
- Hovra över miniatyrbild
- Öppna i ny flik
- Förhandsgranskningsikon i fältet
Byta ut bakgrundsvideon
Öppna inställningar för att byta video, transkoda, förhandsgranska, etc.
Använda bakgrundsvideon som en sektion
Släpp innehåll i bakgrundsvideoelementet. Styla som vanligt i Stilpanelen.
Bakgrundsvideoöverlägg
Lägg till en gradient eller solid överlägg för kontrast. Överlägget ligger ovanpå videon, under innehållet.
Och det är så man använder bakgrunder i Webflow!