Postoje CSS svojstva, kao što su pozadinske slike, slike obruba, maskiranje i svojstva rezanja, pomoću kojih možete izravno dodavanje slika na web stranice i kontroliraju njihovo ponašanje. Međutim, postoje i manje često spominjana CSS svojstva povezana sa slikom rad na slikama dodanima s HTML oznaka, koji preferira način dodavanja slika na web stranice.
Opis posla ovih posljednjih svojstava varira od kontroliranje sjene slike do postavljanje oštrine, pomaže nam da bolje kontroliramo izgled i položaj slika dodanih s označiti. Pogledajmo ih jedan po jedan.
1. Izoštrite slike pomoću slika renderiranje
Kada je slika povećana, preglednik izglađuje sliku, tako da ne izgleda pikselirano. No, ovisno o razlučivosti slike i zaslona, to možda neće biti najbolje u svakom trenutku. Ovim ponašanjem preglednika možete upravljati pomoću slika renderiranje svojstvo.
Ovo dobro podržano vlasništvo kontrolira algoritam koji se koristi za mjerenje slike. Dvije su mu glavne vrijednosti hrskav-rubovi i pikseliziran.
hrskav-rubovi vrijednost održava kontrast boja između piksela. Drugim riječima, nije učinjeno glađenje slika, što izvrsno za pikselske umjetničke radove.
Kada pikseliziran može se koristiti u blizini piksela zauzeti svoj izgled, čineći da izgledaju zajedno zajedno oblikuju jedan veliki piksel, Izvrstan za zaslone visoke razlučivosti.
Ako nastavite pažljivo gledati rubove cvijeća u GIF-u u nastavku, možete vidjeti razliku između uobičajenog i a pikseliziran slika.
img prikaz slike: pikseliran;
2. Razvucite slike pomoću Predmet-fit
sadržati, pokriti, ispuniti vrijednosti su sve poznate, mi ih koristimo za Pozadina veličine svojstvo koje kontrolira kako pozadinska slika ispunjava element kojem pripada. Predmet-fit svojstvo je vrlo slično, kao što također određuje kako se veličina slike nalazi unutar spremnika.
sadržati vrijednost sadrži sliku unutar spremnika. pokriti radi isto, ali ako se omjer slike i spremnika ne podudara, slika je izrezana. ispuniti uzrokuje da slika postane istegnite i napunite spremnik. Ljestvica-doljeodabire najmanju verziju slike prikazati.
Slično komplementarnom Pozadina položaju vlasništvo Pozadina veličine, postoji jedan Predmet položaju imovine za Predmet-fit, isto.
Predmet-fit svojstvo pomiče sliku unutar spremnika za slike na zadane koordinate. Koordinate se mogu definirati kao jedinice apsolutne duljine, jedinice relativne duljine, ključne riječi (vrh, lijevo, centar, dno, i pravo), ili a valjanoj kombinaciji (vrh 20px desno 5px, sredina desno 80px).
Ponekad dodamo (koji su po prirodi inline) pored tekstualnih nizova za dodatne informacije ili dekoraciju. U tom slučaju, poravnavanje teksta i slike u željenu poziciju može biti tad bit lukav - ako ne znate koju imovinu koristiti.
vertikalno poravnanje vlasništvo ne isključivo za stanice tablice same. Također može poravnati inline element unutar unutarnjeg okvira, i na taj se način može koristiti poravnajte sliku u retku teksta. Potrebno je dosta vrijednosti koje se mogu primijeniti na umetnuti element, tako da možete odabrati iz više opcija.
PDF
5. Sjena slika pomoću filter: drop-shadow ()
Kada se u tekstovima i okvirima neprimjetno koriste, sjene mogu dodati život web stranici. Isto vrijedi i za slike. Slike s osnovnim oblicima i transparentnim pozadinama mogu imati koristi od drop-sjena CSS filtar.
Njezini argumenti su slično vrijednostima CSS svojstava vezanih uz sjenu (text-shadow, kutija-sjena). Prva dva predstavljaju vertikalna i horizontalna udaljenost između sjena i slike, treći i četvrti su zamagliti i radijus širenja sjene, a posljednji je boja u sjeni.
Baš kao text-shadow, drop-sjena također stvara sjenu koja jest oblikovan na pripadajući predmet. Dakle, kada se primijeni na sliku, sjena poprima oblik vidljivog dijela slike.
#container width: 300px; visina: 300px; img širina: 100%; visina: 100%; objekt-fit: sadrži;
#container width: 300px; visina: 300px; img širina: 100%; visina: 100%; objekt-fit: sadrži; 
