De technyk mei CSS útfiere
As jo in webside ûntwerke, dan kinne jo belangstelling wêze om te learen hoe't jo in fêste eftergrûnôfbylding of watermark meitsje op in webside. Dit is in mienskiplike ûntwerpbehandeling dy't al hielendal populêr wie. It is in handich effekt om te hawwen yn jo web design bag fan truksjes.
As jo dit noch net dien hawwe of it besocht hat sûnder gelok te probearjen, kin it proses yntimidearje, mar it is eins net hiel dreech. Mei dit koarte tutorial kinne jo de ynformaasje krije dy't jo nedich hawwe om de technyk te behearjen yn in saak fan minuten mei CSS.
Begjinne
Eftergrûnôfbyldings of watermarks (dy't echt gewoan ljocht eftergrûnôfbyldings binne) hawwe in skiednis yn gedruckt ûntwerp. Dokuminten hawwe lang opnommen mei watermarken om har te kopiearjen. Boppedat brûke in protte flyers en brosjuer grutte eftergrûnôfbyldings as in part fan it ûntwerp foar it bedriuw. Web-ûntwerp hat lange útlizzende stilen fan print- en eftergrûnôfbyldings ien fan dizze ferliene stilen.
Dizze grutte eftergrûnôfbyldings binne maklik om te meitsjen mei de folgjende trije CSS-styl- eigenskippen:
- êftergrûnplaatsje
- eftergrûn-werhelje
- eftergrûn-attachment
- eftergrûn-grutte
Êftergrûnplaatsje
Jo sille eftergrûnôfbylding brûke om it ôfbyld te definiearjen dat jo as jo wettermark brûkt wurde. Dizze styl brûkt gewoan in triempaad om in ôfbylding te laden dat jo op jo side hawwe, wierskynlik yn in map mei de namme "ôfbyldingen".
background-image: url (/images/page-background.jpg);
It is wichtich dat it byld sels lichterich of transparanter is as in gewoane ôfbylding. Dit sil skeppe dat "watermark" sjocht yn hoe in semi-transparant ôfbylding efter de tekst, grafyk, en oare wichtige eleminten fan 'e webside leit. Sûnder dit stap sil it eftergrûnôfbylding konkurrearje mei de ynformaasje op jo side en meitsje it dreech om te lêzen.
Jo kinne it eftergrûnôfbylding oanpasse yn elke bewurkingsprogramma lykas Adobe Photoshop.
Eftergrûn-opnij
It eftergrûn-werhelje eigenskip komt neist. As jo wolle dat jo ôfbylding in grut grafysk grafyske styl is, brûk jo dizze eigenskip om dizzeôfbylding allinich ien kear wer te meitsjen.
eftergrûn-werhelje: no-werhelje;
Sûnder de "no-werhelje" eigenskip is it standert dat de ôfbylding wer werom en wer op 'e side werneamt. Dit is ûnwillekeurich yn de measte moderne websteeën, sadat dizze styl as essinsjeel yn jo CSS beskôge wurde.
Eftergrûn-taheaksel
Eftergrûn-oanpak is in eigenskip dy't in protte webûntwerpers ferjitte. It brûken fan jo eftergrûnôfbylding befêstiget as jo it "fêste" eigendom brûke. It is wat it docht dat it ôfbylding yn in watermark is dat fêst stiet op 'e side.
De standertwearde foar dit eigenskip is "scroll". As jo gjin eftergrûn-attachingwearde spesifisearje, dan sil de eftergrûn mei it oare fan 'e side skowe.
eftergrûn-attachment: fêst;
Eftergrûn-grutte
Eftergrûn-grutte is in nijere CSS-eigenskip. It makket it mooglik om de grutte fan in eftergrûn te setten op basis fan de werjefte dy't it ynsteld is. Dit is tige brûkber foar responsive websides dy ferskine op ferskate apparaten op ferskate apparaten .
eftergrûn-grutte: dekking;
Twa brûkte wearden dy jo brûke kinne foar dit eigendom binne:
- Cover - Waarm de eftergrûn sa as de folsleine breedte of folsleine hichte stiet. Dit betsjut dat guon dielen fan it byld net op it skerm ferskine kinne, mar dat it hiele gebiet besprutsen wurde sil.
- Ynhâld - Skale de ôfbylding sadat sawol de hiele breedte en hichte yn it gebiet werjûn wurde. It ôfbylding is net ôfsnien, mar de ûndergong is dat dielen fan it gebiet net mei de ôfbylding wurde kinne wurde.
It CSS ta jo side taheakje
Nei't jo de boppesteande eigenskippen en har wearden begripe, kinne jo dizze stilen oan jo webside taheakje.
Foegje de folgjende ta oan de HEAD fan jo webside as jo in side fan in side meitsje. Add it nei de CSS-stylen fan in ekstern stylblêd as jo in side fan mearderseits meitsje en wolle foardielen fan 'e krêft fan in ekstern blêd.