Det finns CSS-egenskaper, till exempel bakgrundsbilder, gränsbilder, maskering och urklippsegenskaper, som du kan lägg till bilder direkt till webbsidor och kontrollera deras beteende. Det finns emellertid också mindre ofta nämnda bildrelaterade CSS-egenskaper som arbeta på bilder som läggs till med HTML-tagg, vilket föredraget sätt att lägga till bilder på webbsidor.
Arbetsbeskrivningen för dessa senare egenskaper varierar från kontrollerar bildskuggan till ställer in skärpan, hjälper oss att bättre styra utseendet och positionen av bilder som läggs till med märka. Låt oss se dem en efter en.
1. Skärpa bilder med bildrendering
När en bild är uppskalad, kan webbläsaren mjukar ut bilden, så det ser inte ut pixelerat. Men, beroende på bild- och skärmens upplösning, kanske det inte är bäst hela tiden. Du kan styra detta webbläsarbeteende med bildrendering fast egendom.
Den här välskötta egenskapen styr den algoritm som används för att skala en bild. Dess två huvudvärden är skarpa kanter och pixelated.
De skarpa kanter värde upprätthåller färgkontrast mellan pixlar. Med andra ord görs ingen utjämning till bilder, vilka bra för pixel konstverk.
När pixelated används, kan pixelns närliggande pixlar kanske ta upp sitt utseende, vilket gör att det verkar som om de tillsammans bilda en stor pixel, perfekt för skärmar med hög upplösning.
Om du tittar noga på blommans kanter i GIF nedan kan du se skillnaden mellan en vanlig och en pixelated bild.
img image-rendering: pixelated;
2. Sträcka bilder med objekt-fit
De innehålla, omslag, fylla värden är alla bekant, vi använder dem för background-storlek egenskap som styr hur en bakgrundsbild fyller upp det element som det tillhör. De objekt-fit egendom är ganska lik den, som det också bestämmer hur en bildstorlek inuti behållaren.
De innehålla värde innehåller bilden i sin behållare. omslag gör detsamma, men om bildförhållandets bildförhållande och behållaren inte matchar bilden är klippt. fylla orsakar bilden till sträck och fyll i behållaren. skala nerväljer den minsta versionen av bilden att visa.
På samma sätt som komplementet bakgrund-positionen egendom av background-storlek, det är en objekt-positionen egendom för objekt-fit, för.
De objekt-fit fast egendom flyttar en bild inuti en bildbehållare till de givna koordinaterna. Koordinaterna kan definieras som absolut längd enheter, relativa längdenheter, nyckelord (topp, vänster, Centrum, botten, och höger), eller a giltig kombination av dem (topp 20px höger 5px, centrum höger 80px).
Vi lägger till ibland (som är inline av naturen) bredvid textsträngar för mer information eller dekoration. Isåfall, anpassa texten och bilden in i önskad position kan vara lite lite knepigt - om du inte vet vilken egenskap du ska använda.
De vertikal-align egendom är inte ensam för bordceller ensamma. Det kan också anpassa ett inlineelement inuti en inline-box och kan därmed användas anpassa en bild i en textrad. Det tar ett skäligt antal värden som kan appliceras på ett inline-element, så du har många alternativ att välja mellan.
PDF
5. Skuggbilder med filter: drop-shadow ()
När det används inkonsekvent i texter och lådor kan skuggor lägga till livet på en webbsida. Detsamma gäller för bilder. Bilder med kärnformer och genomskinliga bakgrunder kan dra nytta av drop-shadow CSS-filter.
Dess argument är liknar värdena för skuggrelaterade CSS-egenskaper (text-shadow, box-shadow). De två första representerar vertikalt och horisontellt avstånd mellan skuggorna och bilden, den tredje och fjärde är fläck och den skuggans utbredda radie, och den sista är skuggfärg.
Precis som text-shadow, drop-shadow skapar också en skugga som är gjutna till det tillhörande föremålet. Så när den appliceras på en bild tar skuggan formen av den synliga delen av bilden.
#container width: 300px; höjd: 300px; img bredd: 100%; höjd: 100%; objekt-fit: innehåller;
#container width: 300px; höjd: 300px; img bredd: 100%; höjd: 100%; objekt-fit: innehåller; 
