5 Vlastnosti CSS, ktoré by ste mali vedieť

K dispozícii sú vlastnosti CSS, ako sú obrázky na pozadí, obrázky hraníc, maskovanie a orezové vlastnosti, s ktorými môžete priamo pridať obrázky na webové stránky a riadiť ich správanie. Existujú však aj menej často spomenuté vlastnosti CSS súvisiace s obrázkami pracovať na obrázkoch pridané s Značku HTML, ktorý preferovaný spôsob pridávania obrázkov na webové stránky.

Popis práce týchto druhých vlastností sa líši od ovládanie tieňa obrazu na nastavenie ostrosti, pomáha nám lepšie ovládať vzhľad a pozíciu obrázkov pridaných s tag. Pozrime sa na ne po jednom.

1. Zostrihnite obrázky pomocou image-rendering

Keď je obrázok uprednostňovaný, prehliadač vyhladzuje obraz, takže to nevyzerá ako pixelové. Ale v závislosti od rozlíšenia obrazu a obrazovky to nemusí byť vždy najlepšie. Toto správanie prehliadača môžete ovládať pomocou funkcie image-rendering vlastnosť.

Táto dobre podporovaná nehnuteľnosť riadi algoritmus používaný na zmenšenie obrazu. Jej dve hlavné hodnoty sú CRISP okraje a pixelated.

CRISP okraje hodnota udržuje farebný kontrast medzi pixelmi. Inými slovami, nie je urobené žiadne vyhladenie obrázkov, ktoré skvelé pre pixelové umelecké diela.

Kedy pixelated sa používajú pixely blízke pixelu vziať svoj vzhľad, čo sa zdá byť spoločné tvorí jeden veľký pixel, ideálne pre obrazovky s vysokým rozlíšením.

Ak sa stále pozorne pozeráte na okraje kvetov v nižšie uvedenom GIF, môžete vidieť rozdiel medzi pravidelnými a a pixelated obraz.

 img zobrazenie obrázkov: pixelated;  

2. Roztiahnite obrázky pomocou objektovo-fit

obsahovať, veko, vyplniť všetky hodnoty sú známe, používame ich pre background-size Vlastnosť, ktorá riadi, ako obrázok na pozadí vyplní prvok, do ktorého patrí. objektovo-fit majetok je veľmi podobný, ako to tiež určuje ako veľkosti obrázka vo vnútri kontajnera.

obsahovať hodnota obsahuje obrázok v jeho kontajneri. veko to isté, ale ak pomer strán obrazu a kontajnera nezodpovedá, obrázok je orezaný. vyplniť spôsobuje obraz natiahnite a naplňte jeho kontajner. zmenšiť zvolí najmenšiu verziu obrázka zobraziť.

 
  #container width: 300px; výška: 300px;  img šírka: 100%; výška: 100%; object-fit: obsahuje;  

3. Posuňte zábery pomocou objektovo-poloha

Podobne ako doplnok background-polohový majetok background-size, je tu objektovo-poloha nehnuteľnosť pre objektovo-fit, tiež.

objektovo-fit vlastnosť pohybuje obrázok vnútri kontajnera s obrázkami na dané súradnice. Súradnice je možné definovať ako jednotky s absolútnou dĺžkou, jednotky relatívnej dĺžky, Kľúčové slová (top, ľavý, centrum, dno, a správny), alebo a ich platná kombinácia (top 20px vpravo 5px, center right 80px).

 
  #container width: 300px; výška: 300px;  img šírka: 100%; výška: 100%; objektová poloha: 150px 0;  

4. Umiestnite obrázky pomocou vertikálne zarovnanie

Niekedy pridávame (ktoré sú prirodzene vložené) vedľa textových reťazcov pre dodatočné informácie alebo dekoráciu. V tom prípade, zarovnanie textu a obrázku do požadovanej polohy môže byť tad bit ťažký - ak neviete, ktorú vlastnosť používať.

vertikálne zarovnanie nehnuteľnosť je nie výhradne pre bunky tabuľky samotné. Môže tiež zarovnať inline prvok do vnútropodnikovej schránky, a tak môže byť použitý na Zarovnajte obrázok v riadku textu. Vyžaduje sa dostatočný počet hodnôt, ktoré sa môžu použiť na inline element, takže máte k dispozícii veľa možností na výber.

 
 PDF  
 

5. Tieňové obrázky s filter: drop-shadow ()

Keď sa v textoch a poliach nenápadne používajú, tiene môžu pridať život na webovú stránku. To isté platí pre obrázky. Obrázky s tvarmi jadra a priehľadnými pozadiami môžu profitovať z Vrhať tieň Filter CSS.

Jej argumenty sú podobné hodnotám vlastností CSS súvisiacich s tieňmi (text-shadow, box-shadow). Prvé dva predstavujú vertikálnej a horizontálnej vzdialenosti medzi tieňmi a obrazom, tretí a štvrtý sú rozmazať a šírka polomeru tieňa, a posledný je tieňová farba.

Rovnako ako text-shadow, Vrhať tieň tiež vytvára tieň, ktorý je tvarovaný k príslušnému objektu. Takže, keď je aplikovaný na obrázok, tieň má tvar viditeľnej časti obrazu.

 img filter: drop-shadow (0 0 5px modrá);  

Prečítajte si tiež: CSS3 Image Reflection [CSS3 tipy]