Voer die tegniek uit met CSS
As jy 'n webwerf ontwerp, kan jy belangstel om te leer hoe om 'n vaste agtergrondbeeld of watermerk op 'n webblad te skep. Dit is 'n algemene ontwerp behandeling wat al geruime tyd gewild is. Dit is 'n handige effek om in jou webontwerp sak van truuks te hê.
As jy dit nie voorheen gedoen het of dit voorheen sonder geluk probeer het nie, kan die proses intimiderend lyk, maar dit is eintlik glad nie moeilik nie. Met hierdie kort tutoriaal kry jy die inligting wat jy nodig het om die tegniek te bemeester binne enkele minute met behulp van CSS.
Aan die gang kom
Agtergrond beelde of watermerke (wat eintlik net baie ligte agtergrond beelde) het 'n geskiedenis in gedrukte ontwerp. Dokumente het lank watermerke op hulle ingesluit om te voorkom dat hulle gekopieer word. Daarbenewens gebruik baie flyers en brosjures groot agtergrond beelde as deel van die ontwerp vir die gedrukte stuk. Webontwerp het lank geleende style uit druk en agtergrondprente is een van hierdie geleende style.
Hierdie groot agtergrond beelde is maklik om te skep met behulp van die volgende drie CSS styl eienskappe:
- agtergrondprent
- agtergrond-repeat
- agtergrond-aanhangsel
- agtergrond-grootte
Agtergrondprent
Jy sal agtergrond-beeld gebruik om die prent te definieer wat as jou watermerk gebruik sal word. Hierdie styl gebruik eenvoudig 'n lêerpad om 'n prent wat jy op jou webwerf het, te laai, waarskynlik in 'n gids genaamd "beelde."
agtergrond-beeld: url (/images/page-background.jpg);
Dit is belangrik dat die beeld self ligter of meer deursigtig is as 'n normale beeld. Dit sal die "watermerk" -kyk skep waarin 'n semi-deursigtige beeld agter die teks, grafika en ander hoofelemente van die webblad lê. Sonder hierdie stap, sal die agtergrondbeeld meeding met die inligting op jou bladsy en dit moeilik maak om te lees.
U kan die agtergrond prent in enige wysigingsprogram soos Adobe Photoshop, aanpas.
Agtergrond-repeat
Die agtergrond-herhaal eiendom kom volgende. As jy wil hê dat jou prent 'n groot watermerkstylgrafiek is, sal jy hierdie eiendom gebruik om daardie prentjie net een keer te laat vertoon.
agtergrond-herhaling: nie-herhaal;
Sonder die eienskap "nie-herhaal", is die verstek dat die prent oor en oor sal herhaal op die bladsy. Dit is ongewens in die meeste moderne webbladontwerpe, dus hierdie styl moet as noodsaaklik beskou word in jou CSS.
Agtergrond-Attachment
Agtergrond-aanhangsel is 'n eiendom wat baie webontwerpers vergeet. Deur dit te gebruik, hou jou agtergrondbeeld vasgestel wanneer jy die "vaste" eiendom gebruik. Dit is wat die beeld verander in 'n watermerk wat op die bladsy vasgestel is.
Die verstekwaarde vir hierdie eiendom is "scroll." As u nie 'n agtergrond-aanhangselwaarde spesifiseer nie, sal die agtergrond saam met die res van die bladsy blaai.
agtergrond-aanhangsel: vasgestel;
Agtergrond-grootte
Agtergrondgrootte is 'n nuwer CSS-eienskap. Dit stel u in staat om die grootte van 'n agtergrond te bepaal, gebaseer op die kyke waarin dit besigtig word. Dit is baie nuttig vir reageerende webwerwe wat op verskillende groottes op verskillende toestelle sal vertoon.
agtergrond-grootte: dekking;
Twee nuttige waardes wat u vir hierdie eiendom kan gebruik, sluit in:
- Omslag - Skaal die agtergrond sodat die volle breedte of volle hoogte gewys word. Dit beteken dat sommige dele van die prent dalk nie op die skerm verskyn nie, maar dat die hele area gedek sal word.
- Bevat - Skaal die beeld sodat beide die hele breedte en hoogte in die gebied wat gestileer is, vertoon word. Die prentjie word nie afgesny nie, maar die nadeel is dat dele van die area dalk nie deur die beeld gedek word nie.
Voeg die CSS by jou bladsy
Nadat u die bogenoemde eienskappe en hul waardes verstaan, kan u hierdie style by u webwerf voeg.
Voeg die volgende by die hoof van jou webblad as jy 'n enkele bladsy-webwerf maak. Voeg dit by die CSS-style van 'n eksterne stylblad as jy 'n bladsy met verskeie bladsye bou en wil voordeel trek uit die krag van 'n eksterne vel.
liggaam {
agtergrond-beeld: url (/images/page-background.jpg);
agtergrond-herhaling: nie-herhaal;
agtergrond-aanhangsel: vasgestel;
agtergrond-grootte: dekking;
}
// ->
Verander die URL van jou agtergrond prent om ooreen te stem met die spesifieke lêernaam en lêerpad wat relevant is vir jou werf. Maak enige ander toepaslike veranderinge wat ook jou ontwerp pas en jy sal 'n watermerk hê.
Jy kan posisie ook spesifiseer
As jy die watermerk op 'n spesifieke plek op jou webblad wil plaas, kan jy dit ook doen. Byvoorbeeld, jy kan die watermerk in die middel van die bladsy of dalk in die onderste hoek wil hê, in teenstelling met die boonste hoek, wat die standaard is.
Om dit te doen, voeg die agtergrondposisie-eiendom by jou styl toe. Dit sal die prentjie op die presiese plek plaas wat jy wil hê dit moet verskyn. U kan pixelwaardes, persentasies of belynings gebruik om die posisionering-effek te bereik.
agtergrondposisie: sentrum;