Има CSS свойства, като фонови изображения, изображения на граници, маскиране и свойства за изрязване, с които можете директно добавяне на изображения към уеб страници и контролиране на тяхното поведение. Обаче има и по-рядко споменати CSS свойства, свързани с образа работа с изображения, добавени с HTML етикет, който е предпочитаният начин за добавяне на изображения към уеб страници.
Длъжностната характеристика на тези последни свойства варира от контролиране на сянката на изображението да се настройка на остротата, помагаме ни да контролираме по-добре изгледа и позицията на изображенията, добавени с маркер. Нека ги видим един по един.
1. Заточете изображенията с изображение изобразяване
Когато дадено изображение е увеличено, браузърът изглажда изображението, така че да не изглежда пикселизирана. Но, в зависимост от резолюцията на изображението и екрана, това може да не е най-доброто по всяко време. Можете да контролирате поведението на този браузър с изображение изобразяване Имот.
Това е добре поддържан имот контролира алгоритъма, използван за скалиране на изображение. Двете му основни ценности са отчетливи-ръбове и пикселизирани.
Най- отчетливи-ръбове стойност поддържа цветовия контраст между пикселите. С други думи, не се прави изглаждане на изображенията, които чудесно за пикселни произведения на изкуството.
Кога пикселизирани се използва, близките пиксели на пиксела могат възприемат външния му вид, да го направят да изглеждат заедно заедно образуват един голям пиксел, чудесно за екрани с висока резолюция.
Ако продължавате да гледате внимателно ръбовете на цветята в GIF по-долу, можете да видите разликата между обикновен и a пикселизирани изображение.
img image-rendering: pixelated;
2. Разтегнете изображенията с обектно-добре
Най- съдържа, Покрийте, запълни всички стойности са познати, ние ги използваме за фон размер свойство, което контролира как фоновото изображение запълва елемента, към който принадлежи. Най- обектно-добре имотът е доста сходен с него, както и определя как размерът на изображението в неговия контейнер.
Най- съдържа стойност съдържа изображението в неговия контейнер. Покрийте прави същото, но ако съотношението на изображението и на контейнера не съвпадат, изображението е подрязано. запълни причинява изображението на разтегнете и напълнете контейнера. мащаб надолуизбира най-малката версия на изображението за показване.
Подобно на допълващите фон-позиция собственост на фон размер, има едно обектно-позиция имот за обектно-добре, също.
Най- обектно-добре Имот премества изображение в контейнер за изображения към дадените координати. Координатите могат да бъдат определени като абсолютни дължини, относителни дължини, ключови думи (връх, наляво, център, дъно, и прав), или a валидна комбинация от тях (топ 20px надясно 5px, център вдясно 80px).
#container ширина: 300px; височина: 300px; img ширина: 100%; височина: 100%; позиция на обекта: 150px 0;
4. Разположете изображенията с вертикално подравняване
Понякога добавяме (които са вградени по природа) до текстови низове за допълнителна информация или декорация. В този случай, подравняване на текста и изображението в желаната позиция може да бъде малко по-трудно - ако не знаете коя собственост да използвате.
Най- вертикално подравняване собственост не само за клетките на масата. Той може също така да подравнява вградения елемент вътре в кутията за вграждане и по този начин може да се използва за подравняване на изображение в ред от текст. Отнема доста голям брой стойности, които могат да бъдат приложени към вграден елемент, така че можете да избирате от много опции.
PDF
5. Сензорни изображения с филтър: падаща сянка ()
Когато се използват незабележимо в текстове и кутии, сенките могат да добавят живот към уеб страница. Същото важи и за изображенията. Изображения с основни форми и прозрачни фонове могат да се възползват от падащо сянка CSS филтър.
Аргументите му са подобни на стойностите на CSS свойствата, свързани със сенките (текстови сянка, кутия сянка). Първите две представляват вертикално и хоризонтално разстояние между сенките и образа, третата и четвъртата са мъгла и разпространява радиуса на сянката, а последното е цвят на сянка.
Точно като текстови сянка, падащо сянка също така създава сянка, която е формован към съответния обект. Така че, когато се приложи към изображение, сянката приема формата на видимата част от изображението.
#container ширина: 300px; височина: 300px; img ширина: 100%; височина: 100%; обект-годни: съдържа;
#container ширина: 300px; височина: 300px; img ширина: 100%; височина: 100%; обект-годни: съдържа; 
