Det finnes CSS-egenskaper, for eksempel bakgrunnsbilder, grensebilder, maskerings- og klippingegenskaper, som du kan legg til bilder direkte til nettsider og kontrollere deres oppførsel. Det er imidlertid også mindre ofte nevnt bilde-relaterte CSS egenskaper som arbeid på bilder lagt til med HTML-taggen, som den foretrukne måten å legge til bilder på nettsider.
Jobbeskrivelsen til disse sistnevnte egenskapene varierer fra kontrollerer bildeskyggen til setter skarpheten, hjelper oss bedre å kontrollere utseendet og plasseringen av bilder lagt til med stikkord. La oss se dem en etter en.
1. Skarre bilder med bildegjengivelse
Når et bilde er oppskalert, er nettleseren jevner bildet, så det ser ikke ut pixelert. Men, avhengig av oppløsningen til bildet og skjermen, er dette kanskje ikke det beste til enhver tid. Du kan kontrollere denne nettleserens oppførsel med bildegjengivelse eiendom.
Denne godt støttede eiendommen styrer algoritmen som brukes til å skalere et bilde. De to hovedverdiene er skarpe kanter og pixelated.
De skarpe kanter verdi opprettholder fargekontrast mellom piksler. Med andre ord blir det ikke gjort noe glatt på bilder, som flott for piksel kunstverk.
Når pixelated brukes, kan de nærliggende pikslene av en piksel være ta opp sitt utseende, gjør det virke som sammen de danner en stor piksel, Flott for skjermbilder med høy oppløsning.
Hvis du fortsetter å se nærmere på blomsterkanter i GIF nedenfor, kan du se forskjellen mellom en vanlig og en pixelated bilde.
img image-rendering: pixelated;
2. Strekk bilder med objekt-fit
De inneholde, dekke, fylle Verdiene er alle kjent, vi bruker dem til background-size egenskap som styrer hvordan et bakgrunnsbilde fyller opp elementet den tilhører. De objekt-fit Eiendommen er ganske lik den, som den også bestemmer hvordan en bildestørrelse i sin beholder.
De inneholde verdi inneholder bildet i sin beholder. dekke gjør det samme, men hvis bildeforholdet mellom bildet og beholderen ikke stemmer overens, bildet er klippet. fylle forårsaker bildet til strekk og fyll beholderen sin. nedskalerevelger den minste versjonen av bildet å vise.
På samme måte som utfyllingen Bakgrunnen-stilling tilhører background-size, det er en objekt-stilling eiendom for objekt-fit, også.
De objekt-fit eiendom flytter et bilde inne i en bildebeholder til de oppgitte koordinatene. Koordinatene kan defineres som absolutte lengdeenheter, relative lengdeenheter, søkeord (topp, venstre, senter, bunn, og Ikke sant), eller a gyldig kombinasjon av dem (Topp 20px høyre 5px, Midt høyre 80px).
Vi legger noen ganger til (som er inline av naturen) ved siden av tekststrenger for mer informasjon eller dekorasjon. I så fall, justere teksten og bildet inn i ønsket posisjon kan være litt tøft vanskelig - hvis du ikke vet hvilken egenskap du skal bruke.
De vertical-align eiendommen er ikke eksklusivt for bordceller alene. Det kan også justere et inlineelement inne i en inline-boks, og kan dermed brukes til juster et bilde i en tekstlinje. Det tar et rettferdig antall verdier som kan brukes på et inlineelement, så du har mange muligheter å velge mellom.
PDF
5. Skyggebilder med filter: drop-shadow ()
Når det brukes inkonsekvent i tekst og bokser, kan skygger legge til liv på en nettside. Det samme gjelder for bilder. Bilder med kjerneformer og gjennomsiktig bakgrunn kan dra nytte av slagskygge CSS filter.
Argumentene er ligner verdiene til skygge-relaterte CSS egenskaper (text-shadow, box-shadow). De to første representerer vertikal og horisontal avstand mellom skyggene og bildet, den tredje og fjerde er uklarhet og Spred radius av skyggen, og den siste er skyggefarge.
Akkurat som text-shadow, slagskygge skaper også en skygge som er støpt til tilhørende gjenstand. Så når den er brukt på et bilde, tar skyggen formen av den synlige delen av bildet.
#container width: 300px; høyde: 300px; img bredde: 100%; høyde: 100%; objekt-fit: inneholder;
#container width: 300px; høyde: 300px; img bredde: 100%; høyde: 100%; objekt-fit: inneholder; 
