Hei ass wéi Dir rezent Entworf Biller mat CSS addéiere kënnt
Kuckt Iech nei Popularitéiten déi et haut gëtt an eng Designbehandlung, déi Dir sécher si kuckt, ass grouss, screen-spannend Backgroundbilder. Ee vun den Erausfuerderunge mat de Fichieren vun dësen Biller ass vun der bestëmmten Praxis, datt Websäite op verschiddene Ausgabegrößen an Apparater reagéieren - e Wee, deen als responsive Webdesign bekannt ass .
Zënter Äert Websiten Layout Ännerungen an Waasserkäschten mat verschiddene Ausgabegrößen, musst Dir och dës Backgroundsbilder hir Gréisst änneren.
Tatsächlech sinn dës "Flëssbilder" ee vun de Schlësselstécker vun reaktionnellen Websäiten (zesummen mat engem Flëssegitter an Medien Queries). Déi dräi Stécker hu sech schonn e Begleetung vun adäquatem Webdesign, well et ëmmer ëmmer relativ einfach war, onrealistesch Inline-Biller op eng Säit ze setzen (Inline-Biller sinn déi Grafiken, déi als Deel vun der HTML-Markup kodéiert sinn) Selwecht mat Hannergrond Biller (déi op d'Säit benotzt mat CSS Background Properties) huet laang eng grouss Erausfuerderung fir vill Webdesigner an Fronten Entweckler. Glécklech, d'Ergänzung vun der "Background-Size" Eegeschafte vun CSS huet dat gemaach.
An engem separaten Artikel, hunn ech d' Iwwerwaachung fir d'CSS3-Property Background-Gréisst ze benotze fir Biller an enger Fënster ze passen, awer et gëtt e méi besseren, méi nëtzlech Wee fir dëse Besëtz ze plangen. Fir dat ze maachen, benotzen mir déi folgend Eigenschaft a Wäertkombination:
Backgroundgréisst: Deckel;
D'Fonctioun Keyword-Eigenschaft erzielt de Browser fir d'Bildqualitéit ze maache fir d'Fënster anzestellen, egal wéi grouss oder kleng datt dës Fënster kritt. D'Bild ass verklengert fir de ganze Bildschirm ze decken, awer déi ursprénglech Proportiounen an Aspekter sinn intakt behalen, fir datt d'Bild selwer net verformt gëtt.
D'Bild gëtt an der Fënster esou grouss wéi méiglech geluecht, datt déi ganz Fënsteroberfläche bedeckt ass. Dëst bedeit datt Dir keng lee Flecken op der Säit hutt oder all Verzerrung op dem Bild, awer et heescht och datt e puer vun dem Image abhängt dem Aspekter-Verhältnis vun der Bildschiermung an dem Bild betrëfft. Zum Beispill kënnen d'Kanten vun engem Bild (entweder am Uewen, am Gréisst, lénks oder iwwer riets) op d'Biller geschnidden ginn, jee no de Wäerter déi Dir fir d'Background-Position gehéicht. Wann Dir den Hintergrund op "ënne lénks erop orienteet", gëtt eisen Iwwerdeeg op dem Bild vun der ënneschter an der rietser Säit kommen. Wann Dir den Hannergrond afléisse kënnt de Succès aus all de Säiten aus, awer well dat Exzess breed ass, gëtt d'Auswierkunge vun enger enger Säit manner servéiert.
Wéi benotzt Background-Gréisst: Deckel;
Beim Erstelle vun Ärem Backgroundbild ass et eng gutt Iddi fir e Bild ze kreéieren deen zimlech grouss ass. Während Browsers e Bild maache kënnen ouni en spekulativen Impakt op visuellem Qualitéit, wann e Browser en Bild vergréissert an eng Gréisst méi grouss ass wéi et ursprénglech Dimensioune gëtt, gëtt d'visuell Qualitéit verschlechtert, sech verschwannen a pixeléiert. Den Nodeel fir dat ass datt Är Säit eng Leeschtung kritt, wann Dir rieseg Biller op all Bildschirmer leet.
Wann Dir dëst maacht, gitt sécher datt Dir dës Biller fir d'Geschwindegkeet an d'Netzversioun ordinéiert virbereeden . Am Endeffekt muss Dir de glécklecht Medium tëscht enger grousser genuch Bildgréisst an der Qualitéit fannen an eng vernifizéiert Dateigréisst fir Downloadgeschwindegkeet.
Ee vun de gemeinsam Manéier fir d'Skalierhintergrënn Biller ze benotzen ass wann Dir wëllt dat Bild fir de ganzen Hintergrund vun enger Säit ze huelen, ob déi Säit breed ass a se op engem Desktop Computer oder méi kleng ass a gëtt an engem Handheld gespaart Handy Apparater.
Lued Äre Bild op ärem Webshéier a fügen Sie et un Ärem CSS als Hannergrond hinzu:
Background-Image: url (Feierwierker-over-wdw.jpg);
Hannergrond -widderhuelen: nee -widderhuelen;
Background-Center: Center Center;
Background-Attachement: fixéiert;
Füder de Browser de CSS éischter vir:
-webkit -gréisst -gréisst: d'Abdeckung;
-moz -gréisst -gréisst: d'Abdeckung;
-o-Background-Gréisst: Deckel;
Dann addéiere de CSS Properties:
Backgroundgréisst: Deckel;
Ënnert verschidde Fotoen déi Suiten Varying Devices benotzen
Während Respektent Design fir engem Desktop oder e Laptoperfahrung wichteg ass, ass d'Variante vun Apparater déi Zougank zum Web sinn erwierbt an eng méi grouss Variant vun Écranë mat der Gréisst.
Wéi schonn uginn, liesen e ganz grousst responsive Background Bild op engem Smartphone, zum Beispill, ass net e effiziente Bandbreed bewosst Design.
Léiert wéi Dir Mediastate benotze kënnt fir Fotoen ze benotzen, déi ugemiessen sinn fir déi Apparater déi se ugewisen hunn an d'Verbesserung vun Ärer Websäit mat mobilen Apparater verbesseren.
Original Art vum Jennfier Krynin. Edited by Jeremy Girard 9/12/17