Homepage » Coding » 5 CSS tulajdonságok, amelyeket tudnia kell
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ökkentkiválasztja a kép legkisebb változatát megjeleníteni.
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).
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.