Hier is hoe om ontvanklike ontwerp beelde te voeg met behulp van CSS
Kyk na gewilde webwerwe vandag en een ontwerpbehandeling wat jy seker sal sien, is groot, skermuitbreidende agtergrondbeelde. Een van die uitdagings met die byvoeging van hierdie beelde kom uit die beste praktyk dat webwerwe op verskillende skermgroottes en toestelle moet reageer - 'n benadering wat bekend staan as 'n responsiewe webontwerp .
Aangesien jou webwerf se uitleg en skale met verskillende skermgroottes verander, moet hierdie agtergrondbeelde ook dienooreenkomstig skaal.
Trouens, hierdie "vloeibare beelde" is een van die belangrikste stukke reageer webwerwe (saam met 'n vloeistelsel en media navrae). Hierdie drie stukke is van die begin af 'n stapelvoedsel van reageerbare webontwerp, maar hoewel dit nogal redelik maklik was om reageer inlyn beelde op 'n webwerf te voeg (inline beelde is die grafika wat as deel van die HTML-opmaak gekodeer word). Dieselfde met agtergrond beelde (wat in die bladsy gebruik word met behulp van CSS agtergrond eienskappe) het lank reeds 'n beduidende uitdaging vir baie webontwerpers en voorste ontwikkelaars gegee. Gelukkig het die byvoeging van die "agtergrondgrootte" eiendom in CSS dit moontlik gemaak.
In 'n aparte artikel het ek gedek hoe om die agtergrondgrootte van die CSS3-eienskap te gebruik om prente te strek om in 'n venster te pas, maar daar is 'n nog beter, nuttiger manier om vir hierdie eiendom te implementeer. Om dit te doen, sal ons die volgende eienskap en waarde kombinasie gebruik:
agtergrond-grootte: dekking;
Die voorblad sleutelwoord eienskap vertel die blaaier om die beeld te skaal om by die venster te pas, ongeag hoe groot of klein daardie venster kry. Die beeld is afgeskaal om die hele skerm te bedek, maar die oorspronklike verhoudings en aspekverhouding word ongeskonde gehou, sodat die beeld self nie verwring word nie.
Die beeld word so groot as moontlik in die venster geplaas sodat die hele vensteroppervlak gedek word. Dit beteken dat u geen bladsye op u bladsy sal hê of enige verwringing op die prent sal hê nie, maar dit beteken ook dat sommige van die prent afgekeur kan word afhangende van die aspekverhouding van die skerm en die betrokke prent. Byvoorbeeld, die rande van 'n prent (of bo, onder, links of regs) kan op die beelde afgekap word, afhangende van watter waardes jy vir die agtergrondposisie-eienskap gebruik. As u die agtergrond oriënteer na "bo links", sal enige oortollige op die beeld van die onderste en regterkantste kant af kom. As u die agtergrond prentjie sentreer, sal die oorskot van alle kante afkom, maar aangesien die oorskot versprei word, sal die impak aan die een kant minder wees.
Hoe om agtergrond-grootte te gebruik: dekking;
As jy jou agtergrond beeld skep, is dit 'n goeie idee om 'n prentjie te skep wat redelik groot is. Terwyl blaaiers 'n beeld kleiner kan maak sonder 'n merkbare impak op die visuele kwaliteit, wanneer 'n blaaier 'n beeld groter as die oorspronklike dimensies skaal, word die visuele kwaliteit degrader, word onsigbaar en pixelated. Die nadeel hiervan is dat jou bladsy 'n prestasie tref wanneer jy reuse beelde aan alle skerms lewer.
As jy dit doen, maak seker dat jy die beelde goed voorberei vir aflaai spoed en web aflewering . Uiteindelik moet u die gelukkige medium vind tussen 'n groot genoeg beeld grootte en kwaliteit en 'n redelike lêer grootte vir aflaai spoed.
Een van die algemene maniere om skaal agtergrond beelde te gebruik, is wanneer jy wil hê dat die prent die volle agtergrond van 'n bladsy opneem, of die bladsy wyd is en op 'n rekenaar of veel kleiner gekyk word en na 'n handheld, selfoon gestuur word toestelle.
Laai jou prent op na jou webhost en voeg dit by jou CSS as 'n agtergrond prentjie:
agtergrond-beeld: url (vuurwerk-oor-wdw.jpg);
agtergrond-herhaling: nie-herhaal;
agtergrondposisie: sentrumsentrum;
agtergrond-aanhangsel: vasgestel;
Voeg eers die voorafbepaalde CSS vir die leser by:
-webkit-agtergrond-grootte: dekking;
-moz-agtergrond-grootte: dekking;
-om-agtergrond-grootte: dekking;
Voeg dan die CSS-eiendom by:
agtergrond-grootte: dekking;
Gebruik verskillende prente wat wisselende toestelle pas
Terwyl reageer ontwerp vir 'n lessenaar of 'n skootrekenaar ervaring belangrik is, die verskeidenheid van toestelle wat toegang tot die web het aansienlik gegroei, en 'n groter verskeidenheid van skerm groottes kom daarmee saam.
Soos voorheen genoem, is dit byvoorbeeld nie 'n doeltreffende of bandwydte-bewuste ontwerp om 'n baie groot responsiewe agtergrondbeeld op 'n slimfoon te laai nie.
Leer hoe jy media-navrae kan gebruik om beelde te dien wat geskik sal wees vir die toestelle waarop hulle vertoon sal word, en verbeter jou webwerf se versoenbaarheid met mobiele toestelle.
Oorspronklike artikel deur Jennfier Krynin. Geredigeer deur Jeremy Girard 9/12/17