Lastnosti CSS, kot so slike ozadja, slike obrobe, maskiranje in lastnosti izrezovanja, s katerimi lahko neposredno dodajanje slik do spletnih strani in nadzor njihovega vedenja. Vendar pa obstajajo tudi manj pogosto omenjene lastnosti CSS, povezane s sliko delo s slikami, dodanimi z Oznaka HTML, ki je najprimernejši način za dodajanje slik na spletne strani.
Opis delovnega mesta teh lastnosti se razlikuje od nadzor sence slike do nastavitev ostrine, nam pomagajo bolje nadzorovati videz in položaj slik, dodanih z oznaka. Poglejmo jih enega za drugim.
1. Izostrite slike z upodabljanje slik
Ko je slika povečana, brskalnik zgladi sliko, zato ni videti pikselirano. Toda, odvisno od ločljivosti slike in zaslona, to morda ni vedno najboljša. To obnašanje brskalnika lahko nadzorujete z upodabljanje slik nepremičnine.
Ta dobro podprta lastnina nadzoruje algoritem, ki se uporablja za merjenje slike. Njeni glavni vrednoti sta ostri robovi in pixelated.
The ostri robovi vrednost ohranja barvni kontrast med slikovnimi pikami. Z drugimi besedami, ne moremo izravnati slik, ki odlična za slikovno delo s piksli.
Kdaj pixelated Uporablja se lahko bližnja slikovna pika pikslov prevzame svoj videz, da se zdijo skupaj oblikujejo eno veliko slikovno točko, odlično za zaslone visoke ločljivosti.
Če še naprej natančno gledate robove cvetov v GIF spodaj, lahko vidite razliko med običajnim in a pixelated sliko.
img slikovno upodabljanje: pixelated;
2. Raztegnite slike s objekt-fit
The vsebujejo, pokrov, fill vrednosti so vse znane, jih uporabljamo za velikost ozadja lastnost, ki nadzira, kako slika v ozadju zapolni element, ki mu pripada. The objekt-fit lastnina je precej podobna, kot tudi določa kako je velikost slike znotraj vsebnika.
The vsebujejo vrednost vsebuje sliko v vsebniku. pokrov deluje enako, če pa se razmerje slike in vsebnika ne ujema, slika je obrezana. fill povzroči, da slika postane Raztegnite in napolnite posodo. zmanjšatiizbere najmanjšo različico slike prikazati.
Podobno kot se dopolnjuje položaj ozadja lastnina velikost ozadja, tam je položaj objekta nepremičnine za objekt-fit, tudi.
The objekt-fit nepremičnine premakne sliko znotraj vsebnika za slike na dane koordinate. Koordinate lahko definirate kot absolutne dolžine, enote relativne dolžine, ključne besede (na vrh, levo, center, spodaj, in prav) ali a veljavna kombinacija (top 20px desno 5px, sredina desno 80px).
Včasih dodamo (ki so po vrsti inline) poleg besedilnih nizov za dodatne informacije ali dekoracijo. V tem primeru, poravnavo besedila in slike v želeni položaj je lahko tad bit težavno-če ne veste, katero premoženje uporabiti.
The navpično poravnavanje lastnine ne izključno samo za celice tabele. Prav tako lahko poravna inline element znotraj inline box, in tako se lahko uporablja za poravnajte sliko v vrstico besedila. Potrebno je veliko število vrednosti, ki jih lahko uporabite za vdelan element, tako da lahko izbirate med številnimi možnostmi.
PDF
5. Sence slike z filter: drop-shadow ()
Če se v besedilih in poljih neopazno uporabljajo, lahko sence dodajo življenje spletni strani. Enako velja za slike. Slike z osnovnimi oblikami in preglednimi ozadji lahko koristijo drop-shadow CSS filter.
Njeni argumenti so podobne vrednosti lastnosti CSS, povezanih s sencami (text-shadow, box-shadow). Prva dva predstavljata navpična in vodoravna razdalja med sencami in podobo, tretji in četrti sta zameglitev in radij sence, in zadnji je barva senc.
Tako kot text-shadow, drop-shadow ustvarja tudi senco oblikovan na pripadajoči predmet. Torej, ko se uporablja za sliko, senca dobi obliko vidnega dela slike.
#container width: 300px; višina: 300px; img širina: 100%; višina: 100%; objekt-fit: vsebuje;
#container width: 300px; višina: 300px; img širina: 100%; višina: 100%; objekt-fit: vsebuje; 
