5 Властивості CSS, які ви повинні знати

Є властивості CSS, такі як фонові зображення, зображення кордонів, маскування та властивості відсікання, за допомогою яких ви можете безпосередньо додавати зображення до веб-сторінок і контролювати їх поведінку. Однак, існують також менш часто згадані властивості CSS, пов'язані з зображенням робота над зображеннями, доданими за допомогою Тег HTML, який кращий спосіб додавання зображень до веб-сторінок.

Опис роботи цих останніх властивостей змінюється від керування тіньовим зображенням до налаштування різкості, допомагає нам краще контролювати зовнішній вигляд і положення зображень, доданих до . Давайте побачимо їх один за одним.

1. Збільшити різкість зображення візуалізація зображення

Коли зображення збільшується, браузер згладжує зображення, так що він не виглядає нерівним. Але, залежно від роздільної здатності зображення та екрана, це може бути не найкращим. Можна керувати поведінкою цього веб-переглядача за допомогою візуалізація зображення власності.

Це добре підкріплене майно керує алгоритмом, який використовується для масштабування зображення. Її дві основні цінності чіткі краї і нерівній.

The чіткі краї значення підтримує колірний контраст між пікселями. Іншими словами, не відбувається згладжування зображень, які відмінно підходить для роботи з пікселями.

Коли нерівній використовуються пікселі пікселя прийняти її вигляд, роблячи його схожим разом утворюють один великий піксель, відмінно підходить для екранів з високою роздільною здатністю.

Якщо ви продовжуєте придивлятися до країв квітки в GIF, ви можете побачити різницю між звичайним і a нерівній зображення.

 img зображення-візуалізація: нерівна;  

2. Розтягніть зображення за допомогою об'єкт-придатність

The містити, покриття, заповнити Значення всі знайомі, ми використовуємо їх для розмір фону властивість, яка контролює, як фонове зображення заповнює елемент, до якого він належить. The об'єкт-придатність Властивість цілком схожа на неї, як вона також визначає як розмір зображення в його контейнері.

The містити значення містить зображення в його контейнері. покриття робить те ж саме, але якщо співвідношення сторін зображення і контейнера не збігаються, зображення обрізається. заповнити викликає зображення розтягують і заповнюють її контейнер. масштабування вибирає найменшу версію зображення показувати.

 
  #container ширина: 300px; висота: 300px;  img ширина: 100%; висота: 100%; об'єкт-придатність: містить;  

3. Перемістіть зображення за допомогою позиція об'єкта

Подібно до доповнення фонове положення майно розмір фону, є позиція об'єкта майно для об'єкт-придатність, теж.

The об'єкт-придатність власності переміщує зображення всередині контейнера зображення до заданих координат. Координати можуть бути визначені як одиниці абсолютної довжини, відносні одиниці довжини, ключові слова (зверху, зліва, центр, знизу, і право), або a дійсне їх поєднання (верхній 20px праворуч 5px, центр праворуч 80px).

 
  #container ширина: 300px; висота: 300px;  img ширина: 100%; висота: 100%; позиція об'єкта: 150px 0;  

4. Розташуйте зображення за допомогою вертикальне вирівнювання

Ми іноді додаємо (які є вбудованими за природою) поряд з текстовими рядками для додаткової інформації або прикраси. В такому разі, вирівнювання тексту та зображення в потрібне положення може бути трохи трохи складніше - якщо ви не знаєте, яке властивість використовувати.

The вертикальне вирівнювання власність не виключно для комірок таблиці. Він також може вирівнювати вбудований елемент всередині вбудованого вікна і таким чином можна використовувати вирівняти зображення в рядку тексту. Він приймає чимало значень, які можна застосувати до вбудованого елемента, тому ви можете обрати багато варіантів.

 
 PDF  
 

5. Тіньові зображення з фільтр: drop-shadow ()

Використовуючи непомітно в текстах і коробках, тіні можуть додавати життя веб-сторінці. Те ж саме справедливо і для зображень. Зображення з основними формами і прозорими фонами можуть скористатися тінь CSS-фільтр.

Її аргументи аналогічно значенням тіньових властивостей CSS (text-shadow, box-shadow). Перші два являють собою вертикальна і горизонтальна відстань між тінями і зображенням третій і четвертий є розмиття і радіус поширення тіні, а останній - це колір тіні.

Так як text-shadow, тінь також створює тінь, яка є формується до приналежності об'єкта. Тому, коли вона застосовується до зображення, тінь приймає форму видимої частини зображення.

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

Читайте також: Відбиття зображення CSS3 [Поради CSS3]