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.
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 sedan 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.
- För att ta bort en färgruta drar du färgrutan ur 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. För att ta bort ett färgstopp drar du färgstoppet ut från panel.
- Ange vinkeln för linjär övertoning.
- För att 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%)
- 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
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).
För Box shadow genereras alltid Webkit- och w3c-prefix oavsett om du har valt dem i Preferences 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 ska du se till att välja de nödvändiga leverantörsprefixen i Preferences. 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 URL eller gradient egenskapen i CSS Designer.
Dreamweaver innehåller en grundläggande implementering av funktionen för att byta 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.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
