5 CSS tulajdonságok, amelyeket tudnia kell

Vannak olyan CSS tulajdonságok, mint a háttérképek, a szegélyes képek, a maszkolás és a vágási tulajdonságok közvetlenül hozzáadhat képeket a weboldalakra, és ellenőrizzék a viselkedésüket. Ugyanakkor kevésbé gyakori a képhez kapcsolódó CSS ​​tulajdonságok is a képekkel hozzáadott munka a HTML címke, amely a képek weboldalakhoz való hozzáadásának előnyben részesített módja.

Az utóbbi tulajdonságok leírása változó a kép árnyékának vezérlése nak nek az élesség beállítása, Segítünk nekünk jobban szabályozni a hozzáadott képek megjelenését és helyét címke. Lássuk őket egyenként.

1. A képeket élesítse image-rendering

Ha egy képet méreteznek, a böngésző simítja a képet, így nem tűnik pixeláltnak. De a kép és a képernyő felbontásától függően ez nem mindig a legjobb. A böngésző viselkedését a image-rendering ingatlan.

Ez a jól támogatott ingatlan vezérli a kép méretezéséhez használt algoritmust. Két fő értéke ropogós-élek és pixeles.

A ropogós-élek érték megtartja a képpontok közötti kontrasztot. Más szavakkal, a képekhez nincs simítás, ami nagyszerű a pixel grafikához.

Amikor pixeles használják, a pixel közeli képpontjai lehetnek megjelenjen, úgy tűnik, hogy együtt látszanak alkotnak egy nagy pixelt, nagyszerű nagy felbontású képernyőkhöz.

Ha a GIF alatt lévő virágszéleket szorosan figyelte, akkor a rendszeres és a közötti különbség látható pixeles kép.

 img image-rendering: pixelated;  

2. Feszítse ki a képeket objektum-fit

A tartalmaz, borító, tölt az értékek mind ismerősek, ezeket a background-size tulajdonság, amely szabályozza, hogy a háttérkép hogyan tölti ki a hozzá tartozó elemet. A objektum-fit az ingatlan meglehetősen hasonlít rá, mivel azt is meghatározza a kép mérete a tartályban.

A tartalmaz érték tartalmazza a képet a tartályában. borító ugyanaz, de ha a kép és a tároló képaránya nem egyezik, a a kép kivágásra kerül. tölt okozza a képet húzza ki és töltse ki a tartályt. arányosan lecsökkent kiválasztja a kép legkisebb változatát megjeleníteni.

 
  #container szélesség: 300px; magasság: 300px;  img szélesség: 100%; magasság: 100%; objektum-illeszkedés: tartalmaz;  

3. Váltás a képekkel objektum-helyzetben

Hasonlóan a kiegészítéshez background-position tulajdona background-size, van egy objektum-helyzetben ingatlan objektum-fit, is.

A objektum-fit ingatlan mozgatja a képet egy képtartály belsejében a megadott koordinátákhoz. A koordináták definiálhatók abszolút hosszúságú egységek, relatív hosszúságú egységek, kulcsszavak (felső, balra, központ, alsó, és jobb) vagy a érvényes kombinációja (top 20px jobb 5px, jobbra 80px).

 
  #container szélesség: 300px; magasság: 300px;  img szélesség: 100%; magasság: 100%; objektumhelyzet: 150px 0;  

4. Helyezze el a képeket vertical-align

Néha hozzáadunk (amelyek természetüknél fogva vannak) a szövegstringek mellett hozzáadott információk vagy díszítés. Ebben az esetben, a szöveg és a kép igazítása a kívánt pozícióba egy kicsit trükkös lehet, ha nem tudja, hogy melyik tulajdonságot kell használni.

A vertical-align tulajdonság nem kizárólagosan csak asztali sejtekhez. Az inline doboz belsejében egy inline elemet is igazíthat, és így használható a kép egy sorba igazítása. Elég sok értéket vesz igénybe, amelyeket egy inline elemre lehet alkalmazni, így sok lehetőség közül választhat.

 
 PDF  
 

5. Árnyékképek szűrő: drop-shadow ()

Ha a szövegekben és a dobozokban szokatlanul használják, az árnyékok életet adhatnak hozzá egy weboldalhoz. Ugyanez igaz a képekre is. Képek, amelyek alapformákat és átlátszó háttereket tartalmaznak hasznára válhat árnyék CSS szűrő.

Az érvelés hasonló az árnyékhoz kapcsolódó CSS ​​tulajdonságokhoz (text-shadow, box-shadow). Az első kettő a függőleges és vízszintes távolság az árnyékok és a kép között a harmadik és a negyedik a elhomályosít és a az árnyék sugara, és az utolsó az árnyék színe.

Mint text-shadow, árnyék szintén létrehoz egy árnyékot a hozzátartozó objektumhoz. Tehát, amikor egy képet alkalmazunk, az árnyék a kép látható részének alakját veszi fel.

 img filter: drop-shadow (0 0 5px kék);  

Olvassa el: CSS3 Képvisszaverődés [CSS3 Tippek]