Användarhandbok Avbryt

Använda övertoningar på bakgrund

 

 

Läs det här avsnittet om du vill lära dig hur du använder och redigerar övertoningar på din webbsidas bakgrund med hjälp av panelen CSS Designer.

Med CSS Designer-panelen kan du använda övertoningar på bakgrunden på dina webbplatser. Egenskapen gradient är tillgänglig i bakgrundskategorin.

Gradient-egenskapen
Gradient-egenskapen

Klicka på intill egenskapen gradient. Då öppnas panelen för övertoningar. Med den här panelen kan du:

  • Välja färger från olika färgmodeller (RGBa, Hexadecimal eller HSLa). Spara därefter olika färgkombinationer som färgrutor.
    • Om du vill återgå från den nya färgen till ursprungsfärgen klickar du på ursprungsfärgen (K).
    • Om du vill ändra färgrutornas inbördes ordning drar du dem till önskad position.
    • Om du vill ta bort en färgruta drar du ut den från panelen.
  • Använd färgsteg för att skapa komplexa övertoningar. Klicka var du vill mellan standardfärgstegen för att skapa ett färgsteg. Om du vill ta bort ett färgsteg drar du ut det från panelen.
  • Ange vinkeln för linjär övertoning.
  • Om du vill upprepa mönstret redigerar du egenskapen background-repeat.
  • Spara anpassade övertoningar som färgrutor.

Så här fungerar följande kod:

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
  • 57deg: Anger vinkeln för den linjära övertoningen
  • rgba(255, 255, 255, 1.00): Färg för det första färgsteget
  • 0%: Anger färgsteget
Obs!

Bara %-värden för färgstegen stöds av Dreamweaver. Om du använder andra värden, till exempel px eller em, läser Dreamweaver dem som ”nil”. Dreamweaver stöder inte CSS-färger. Om du anger sådana färger i koden läses de som ”nil”.

Återge övertoningar i webbläsare

Om du använder övertoningar som bakgrund kan du konfigurera Dreamweaver så att övertoningarna återges rätt i olika webbläsare. Dreamweaver lägger till rätt leverantörsprefix i koden så att övertoningar kan visas i webbläsarna.

Dreamweaver kan skriva följande leverantörsprefix tillsammans med w3c-format:

  • Webkit
  • Firefox
  • Opera

Som standard skriver Dreamweaver leverantörsprefix för Webkit och Dreamweaver Live-vyn. Du kan välja övriga önskade leverantörer via dialogrutan Inställningar (Inställningar > CSS-format).

Obs!

Webkit- och w3c-prefix genereras alltid för rutskugga, oberoende av om du har valt dem i dina Inställningar eller inte.

Ändringar av övertoningarna återspeglas också i de leverantörsspecifika syntaxerna. Om du öppnar en befintlig fil som innehåller leverantörsspecifika syntaxer i Dreamweaver CC bör du kontrollera att du väljer rätt leverantörsprefix i Inställningar. Dreamweaver uppdaterar som standard bara kod som är relaterad till Webkit och Dreamweaver Live-vyn när du använder eller ändrar övertoningar. Övriga leverantörsspecifika syntaxer i din kod uppdateras alltså inte.

Växla bakgrundsbilder och övertoningar

Du kan ändra visningsordningen (i koden) för bakgrundsbilderna och övertoningarna med en klickning.

Klicka på pilen bredvid egenskapen url eller gradient i CSS Designer.

Obs!

Dreamweaver CC innehåller en grundläggande implementering av funktionen för att växla bakgrund. Om du har flera värden eller bilder kan det hända att växlingen inte fungerar som den ska. Låt oss säga att du har en bild, en ytterligare bild och dessutom en övertoning på bakgrunden. Om du växlar övertoningen ändras ordningen och övertoningen hamnar först, sedan den andra bilden och sist den första bilden.

Få hjälp snabbare och enklare

Ny användare?