Der er CSS-egenskaber, såsom baggrundsbilleder, grænsebilleder, maskerings- og klipningsegenskaber, som du kan Tilføj direkte billeder til websider og kontrollere deres adfærd. Men der er også mindre hyppigt nævnte billedrelaterede CSS-egenskaber, som arbejde på billeder tilføjet med HTML-tag, som den foretrukne måde at tilføje billeder til websider på.
Jobbeskrivelsen af disse sidstnævnte egenskaber varierer fra styring af billedskyggen til indstilling af skarphed, hjælper os til bedre at kontrollere udseendet og placeringen af billeder tilføjet med tag. Lad os se dem en efter en.
1. Skær billeder med billede-gengivelse
Når et billede er opskaleret, skal browseren udglatter billedet, så det ser ikke pixelated ud. Men det afhænger måske ikke af opløsningen af billedet og skærmen, det er måske ikke det bedste hele tiden. Du kan styre denne browser adfærd med billede-gengivelse ejendom.
Denne velunderbyggede ejendom styrer algoritmen, der bruges til at skalere et billede. Dens to hovedværdier er skarpe kanter og pixeleret.
Det skarpe kanter værdi opretholder farvekontrast mellem pixels. Med andre ord bliver der ikke gjort noget udjævning til billeder, som fantastisk til pixel kunstværk.
Hvornår pixeleret bruges, kan de nærliggende pixels af en pixel måske tage sit udseende op, gør det til at virke som de sammen danne en stor pixel, fantastisk til skærme med høj opløsning.
Hvis du holder øje med blomsterkanterne i GIF nedenfor, kan du se forskellen mellem en regelmæssig og en pixeleret billede.
img billedgengivelse: pixelated;
2. Stræk billeder med objekt-fit
Det indeholde, dække over, fylde Værdier er alle bekendt, vi bruger dem til baggrund-størrelse egenskab, der styrer, hvordan et baggrundsbilde fylder det element, den tilhører. Det objekt-fit Ejendommen er meget lig den, som den også bestemmer hvordan en billedstørrelser inde i sin beholder.
Det indeholde værdi indeholder billedet i sin beholder. dække over gør det samme, men hvis billedformatet for billedet og beholderen ikke stemmer overens billedet er klippet. fylde forårsager billedet til stræk og fyld beholderen. nedskalerevælger den mindste version af billedet at vise.
Tilsvarende til komplementeringen baggrund-stillingen ejendom af baggrund-størrelse, der er en objekt-stillingen ejendom for objekt-fit, også.
Det objekt-fit ejendom flytter et billede inde i en billedbeholder til de givne koordinater. Koordinaterne kan defineres som absolutte længdeenheder, relative længdeenheder, søgeord (top, venstre, centrum, bund, og ret), eller a gyldig kombination af dem (top 20px højre 5px, center højre 80px).
Vi tilføjer nogle gange (som er inline af natur) ved siden af tekststrengene for yderligere information eller dekoration. I det tilfælde, justere teksten og billedet ind i den ønskede position kan være en smule smule vanskelig - hvis du ikke ved hvilken ejendom du skal bruge.
Det vertical-align ejendommen er ikke udelukkende for bordceller alene. Det kan også justere et inlineelement inde i en inline boks, og kan således bruges til juster et billede i en tekstlinje. Det tager et rimeligt antal værdier, som kan anvendes på et inline element, så du har mange muligheder at vælge imellem.
PDF
5. Skyggebilleder med filter: drop-shadow ()
Når det bruges uklart i tekster og bokse, kan skygger tilføje livet til en webside. Det samme gælder for billeder. Billeder med kerneformer og gennemsigtige baggrunde kan drage fordel af drop-shadow CSS filter.
Dens argumenter er svarende til værdierne for de skyggerelaterede CSS-egenskaber (tekst-skygge, box-shadow). De to første repræsenterer lodret og vandret afstand mellem skyggerne og billedet er den tredje og fjerde den sløring og spredte radius af skyggen, og den sidste er skygge farve.
Ligesom tekst-skygge, drop-shadow skaber også en skygge der er støbt til det tilhørende objekt. Så når den anvendes på et billede, tager skyggen form af den synlige del af billedet.
#container width: 300px; højde: 300px; img bredde: 100%; højde: 100%; objekt-fit: indeholder;
#container width: 300px; højde: 300px; img bredde: 100%; højde: 100%; objekt-fit: indeholder; 
