Hvis du er designe et websted, kan du være interesseret i at lære at oprette et fast baggrundsbillede eller vandmærke på en webside. Dette er en almindelig designbehandling, der har været populær online i nogen tid. Det er en praktisk effekt at have i din webdesign pose med tricks.
Hvis du ikke har gjort dette før eller har prøvet det tidligere uden held, kan processen virke skræmmende, men det er faktisk slet ikke særlig svært. Med denne korte vejledning får du de oplysninger, du har brug for til at lære teknikken på få minutter ved hjælp af CSS.
Kom godt i gang
Baggrundsbilleder eller vandmærker (som egentlig bare er meget lette baggrundsbilleder) har en historie inden for trykt design. Dokumenter har længe inkluderet vandmærker på dem for at forhindre, at de kopieres. Derudover bruger mange flyers og brochurer store baggrundsbilleder som en del af designet af det trykte stykke. Webdesign har længe lånt stilarter fra tryk, og baggrundsbilleder er en af disse lånte stilarter.
Disse store baggrundsbilleder er nemme at oprette ved hjælp af følgende tre CSS-stil ejendomme:
- baggrundsbillede
- baggrund-gentagelse
- baggrund-vedhæftet fil
- baggrundsstørrelse
Baggrundsbillede
Du bruger baggrundsbillede til at definere det billede, der skal bruges som dit vandmærke. Denne stil bruger simpelthen en filsti til at indlæse et billede, du har på dit websted, sandsynligvis i et bibliotek med navnet billeder.
baggrundsbillede: url (/images/page-background.jpg);
Det er vigtigt, at selve billedet er lysere eller mere gennemsigtigt end et normalt billede. Dette vil skabe det "vandmærke"udseende, hvor et semi-gennemsigtigt billede ligger bag tekst, grafik og andre hovedelementer på websiden. Uden dette trin vil baggrundsbilledet konkurrere med oplysningerne på din side og gøre det vanskeligt at læse.
Du kan justere baggrundsbilledet i ethvert redigeringsprogram som f.eks Adobe Photoshop.
Baggrund-gentag
Baggrunds-gentagelsesegenskaben kommer derefter. Hvis du vil have, at dit billede skal være et stort vandmærke-grafik, skal du bruge denne egenskab til kun at få det billede vist en gang.
baggrund-gentagelse: ingen gentagelse;
Uden nej-gentag egenskab, er standard, at billedet gentages igen og igen på siden. Dette er uønsket i de fleste moderne websidesign, så denne stil skal betragtes som vigtig i din CSS.
Baggrund-vedhæftet fil
Baggrundstilknytning er en egenskab, som mange webdesignere glemmer. Brug af det holder dit baggrundsbillede fast på plads, når du bruger fast ejendom. Det er det, der gør billedet til et vandmærke, der er fastgjort på siden.
Standardværdien for denne egenskab er rul. Hvis du ikke angiver en vedhæftningsværdi i baggrunden, ruller baggrunden sammen med resten af siden.
baggrundsvedhæftning: fast;
Baggrundsstørrelse
Baggrundsstørrelse er en nyere CSS-ejendom. Det giver dig mulighed for at indstille størrelsen på en baggrund baseret på den visningsport, den vises i. Dette er meget nyttigt for lydhøre hjemmesider der vises i forskellige størrelser på forskellige enheder.
baggrundsstørrelse: omslag;
To nyttige værdier, du kan bruge til denne egenskab, inkluderer:
- Dække over - Skaler baggrunden, så enten den fulde bredde eller den fulde højde vises. Dette betyder, at nogle dele af billedet muligvis ikke vises på skærmen, men at hele området bliver dækket.
- Indeholde - Skaler billedet, så både hele bredden og højden vises i det område, der styles. Billedet er ikke afskåret, men ulempen er, at dele af området muligvis ikke er dækket af billedet.
Tilføjelse af CSS til din side
Når du har forstået ovenstående egenskaber og deres værdier, kan du føje disse stilarter til dit websted.
Føj følgende til HEAD på din webside, hvis du opretter et websted med en enkelt side. Føj det til CSS-typografierne på et eksternt typografiark, hvis du bygger et websted med flere sider og vil udnytte kraften i et eksternt ark.
Skift URL'en til dit baggrundsbillede, så det matcher det specifikke filnavn og den filsti, der er relevant for dit websted. Foretag andre passende ændringer, så de også passer til dit design, så får du et vandmærke.
Du kan også specificere position
Hvis du vil placere vandmærket et bestemt sted på din webside, kan du også gøre det. For eksempel vil du muligvis have vandmærket midt på siden eller måske i det nederste hjørne i modsætning til det øverste hjørne, som er standard.
For at gøre dette skal du tilføje egenskaben baggrundsposition til din stil. Dette placerer billedet på det nøjagtige sted, som du gerne vil have det vist. Du kan bruge pixelværdier, procenter eller justeringer for at opnå denne positioneringseffekt.
baggrund-position: center;