Võimalik on CSS-i omadusi, näiteks taustapilte, piiripilte, varjamis- ja lõikamisomadusi otse pilte lisada veebilehtedele ja kontrollida nende käitumist. Siiski on ka harvemini mainitud pildiga seotud CSS-i omadusi töödega lisatud töö HTML-silt, mis on eelistatud viis veebilehtedele piltide lisamiseks.
Viimaste omaduste kirjeldus varieerub pildi varju reguleerimine kuni teravuse seadistamine, aidates meil paremini kontrollida piltide väljanägemist ja asukohta silt. Vaatame neid ükshaaval.
1. Teravustage kujutisi kujutise renderdamine
Kui pilt on suurendatud, siis brauser silub pilti, nii et see ei näe pikslit. Kuid sõltuvalt pildi ja ekraani eraldusvõimest ei pruugi see alati olla parim. Saate seda brauseri käitumist juhtida kujutise renderdamine vara.
See hästi toetatud vara kontrollib pildi mõõtmiseks kasutatavat algoritmi. Selle kaks põhiväärtust on teravad servad ja pixelated.
The teravad servad väärtus säilitab pikslite vahelise kontrastsuse. Teisisõnu, piltidele ei tehta ühtegi tasandamist suurepärane piksliteoste jaoks.
Millal pixelated kasutatakse pikslite lähedal asuvaid piksleid ilmuma, see tundub koos moodustavad ühe suure piksli, Suurepärane kõrglahutusega ekraanide jaoks.
Kui vaatate allpool GIF-i lille servi, näete tavalise ja a vahelist erinevust pixelated pilt.
img image-rendering: pixelated;
2. Pingutage pilte objekti-sobib
The sisaldama, katta, täitke väärtused on kõik tuttavad, me kasutame neid tausta suurus omadus, mis reguleerib, kuidas taustapilt täidab selle elemendi. The objekti-sobib vara on üsna sarnane sellega, nagu see ka määrab kuidas kujutise suurus oma konteinerisse kuulub.
The sisaldama väärtus sisaldab oma konteineris olevat pilti. katta teeb sama, aga kui pildi ja konteineri kuvasuhe ei vasta, siis pilt on kärbitud. täitke põhjustab pildi venitada ja täita oma mahuti. skaala vähendaminevalib pildi väikseima versiooni kuvamiseks.
Sarnaselt täiendamisega taustasend vara tausta suurus, seal on objekti asukoht vara objekti-sobib, ka.
The objekti-sobib vara teisaldab kujutise kujutise konteinerisse antud koordinaatidele. Koordinaate saab määratleda kui absoluutse pikkusega ühikud, suhtelise pikkusega ühikud, märksõnad (top, vasakule, Keskus, põhja, ja õigus) või a nende kombinatsioon (top 20px parem 5tk, paremal pool 80tk).
Mõnikord lisame (mis on olemuselt inline) tekstistringide kõrval lisainformatsiooni või kaunistamiseks. Sellisel juhul, teksti ja pildi joondamine soovitud asendisse võib olla natuke keeruline, kui te ei tea, millist vara kasutada.
The vertikaalne joondamine vara on mitte ainult tabelrakkudele. Samuti võib see joondada sisemise elemendi sisemise kasti sees ja seega saab seda kasutada pildi joondamine tekstireal. See võtab üsna palju väärtusi, mida saab rakendada inline elemendile, nii et teil on palju võimalusi valida.
PDF
5. Varjundiga pildid filter: tilk-vari ()
Kui tekstid ja kastid kasutavad silmatorkavalt, võivad varjud lisada veebilehe elu. Sama kehtib ka piltide puhul. Pildid, millel on põhilised kujud ja läbipaistvad taustad saavad sellest kasu vari CSS-filter.
Tema argumendid on sarnane varjupaiga CSS-i omaduste väärtustega (teksti vari, kast-vari). Kaks esimest esindavad vertikaalne ja horisontaalne kaugus varjude ja kujutise vahel on kolmas ja neljas hägusus ja varju raadius, ja viimane on varju värv.
Just nagu teksti vari, vari loob ka varju vormitud kuuluvate esemetega. Niisiis, kui see kujutisele rakendub, võtab vari pildi nähtava osa kuju.
#container width: 300px; kõrgus: 300 px; img laius: 100%; kõrgus: 100%; objekti sobivus: sisaldama;
#container width: 300px; kõrgus: 300 px; img laius: 100%; kõrgus: 100%; objekti sobivus: sisaldama; 
