Se på populære hjemmesider i dag, og en designbehandling, som du sikkert vil se, er store, skærmbaserede baggrundsbilder. En af udfordringerne ved at tilføje disse billeder kommer fra den bedste praksis, at websites skal reagere på forskellige skærmstørrelser og enheder - en tilgang, der er kendt som lydhurt webdesign.
Da dit websites layout ændres og skaleres med forskellige skærmstørrelser, skal også disse baggrundsbilleder skalere deres størrelse i overensstemmelse hermed. Faktisk er disse "væske billeder" en af de vigtigste dele af lydhørwebsites (sammen med et fluidnet og medieforespørgsler). Disse tre stykker har siden starten været en hæftning til lydhurtigt webdesign, men det har altid været temmelig nemt at tilføje responsive inline-billeder til et websted (inlinebilleder er grafikken, der er kodet som en del af HTML-markup). det samme med baggrundsbilleder (som er stylet ind på siden ved hjælp af CSS-baggrundsegenskaber) har længe givet en stor udfordring for mange webdesignere og frontend-udviklere. Heldigvis har tilføjelsen af egenskaben "baggrundsstørrelse" i CSS gjort det muligt.
I en separat artikel dækkede jeg, hvordan man bruger CSS3-ejendommen baggrund-størrelse at strække billeder for at passe i et vindue, men der er en endnu bedre og mere nyttig måde at implementere til denne ejendom. For at gøre dette bruger vi følgende egenskabs- og værdikombination:
baggrundsstørrelse: dækning;
Det dække over søgeordsejendom fortæller browseren at skalere billedet for at passe til vinduet, uanset hvor stort eller lille det vindue får. Billedet er skaleret til at dække hele skærmen, men de originale proportioner og billedforhold holdes intakte, hvilket forhindrer billedet i sig selv at blive forvrænget. Billedet placeres i vinduet så stort som muligt, så hele vinduets overflade er dækket. Det betyder, at du ikke vil have blanke pletter på din side eller forvrængning på billedet, men det betyder også, at noget af billedet kan trimmes, afhængigt af billedformatet på skærmen og det pågældende billede. For eksempel kan kantene på et billede (enten øverst, nederst, venstre eller højre) blive afskåret på billederne, afhængigt af hvilke værdier du bruger til baggrundsstatusegenskaben. Hvis du orienterer baggrunden til "øverst til venstre", kommer overskud på billedet ud fra bunden og højre side. Hvis du centrerer baggrundsbilledet, kommer overskydende ud af alle sider, men da overskuddet er spredt ud, vil virkningen på en side være mindre tjene.
Sådan bruges baggrundsstørrelse: dækning;
Når du opretter dit baggrundsbillede, er det en god idé at oprette et billede, der er ret stort. Mens browsere kan gøre et billede mindre uden en mærkbar indvirkning på den visuelle kvalitet, når en browser skalerer et billede til en størrelse, der er større end dets originale dimensioner, vil den visuelle kvalitet blive nedbrudt, blive sløret og pixeleret. Ulempen ved dette er, at din side tager et resultat, når du leverer gigantiske billeder til alle skærme. Når du gør dette, skal du sørge for at forberede disse billeder korrekt til downloadhastighed og weblevering. I sidste ende skal du finde det lykkelige medium mellem en stor nok billedstørrelse og kvalitet og en rimelig filstørrelse til downloadhastigheder.
En af de almindelige måder at bruge skaleringsbakgrundsbilleder på er, når du vil have billedet til at tage hele baggrunden af en side op, om den pågældende side er bred og vises på en stationær computer eller meget mindre og sendes til en håndholdt, mobil enheder.
Upload dit billede til din webhost og tilføj det til dit CSS som et baggrundsbilde:
baggrundsbillede: url (fyrværkeri-over-wdw.jpg);background-repeat: no-repeat;baggrundsstilling: center center;baggrundsbestemmelse: fast;
Tilføj først den forudindstillede CSS-browser:
-webkit-baggrundsstørrelse: cover;-moz-background-size: cover;-o-background-size: cover;
Tilføj derefter CSS-ejendommen:
baggrundsstørrelse: dækning;
Brug af forskellige billeder, der passer til forskellige enheder
Selvom lydhurtigt design til en desktop eller en bærbar oplevelse er vigtig, er det mange forskellige enheder, der kan få adgang til internettet, vokset betydeligt, og der opnås et større udvalg af skærmstørrelser.
Som tidligere nævnt er det ikke et effektivt eller båndbreddebevidst design at lægge et meget stort lydhør baggrundsbillede på en smartphone.
Lær, hvordan du kan bruge medieforespørgsler til at vise billeder, der passer til de enheder, de vil blive vist på, og yderligere forbedre dit websites kompatibilitet med mobilenheder.
