5 CSS-свойств, которые вы должны знать

Существуют свойства CSS, такие как фоновые изображения, изображения границ, свойства маскирования и обрезки, с помощью которых вы можете напрямую добавлять изображения к веб-страницам и контролировать их поведение. Тем не менее, есть также менее часто упоминаемые свойства CSS, связанные с изображениями, которые работать с изображениями, добавленными с HTML-тег, какой предпочтительный способ добавления изображений на веб-страницы.

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

1. Резкость изображения с Изображение-рендеринг

Когда изображение масштабируется, браузер сглаживает изображение, так что это не выглядит неровной. Но, в зависимости от разрешения изображения и экрана, это может быть не всегда лучшим. Вы можете контролировать это поведение браузера с помощью Изображение-рендеринг имущество.

Это хорошо поддерживается свойство управляет алгоритмом, используемым для масштабирования изображения. Его две основные ценности хрустящие края а также некачественно.

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

когда некачественно используется, соседние пиксели пикселя могут принять его внешний вид, делая это, как они вместе сформировать один большой пиксель, отлично подходит для экранов с высоким разрешением.

Если вы продолжаете внимательно следить за краями цветов в GIF ниже, вы можете увидеть разницу между обычным и некачественно образ.

 img рендеринг изображений: неровный;  

2. Растягивать изображения с Объект посадки

содержать, покрытие, заполнить ценности все знакомы, мы используем их для фон-размер свойство, управляющее тем, как фоновое изображение заполняет элемент, которому оно принадлежит. Объект посадки свойство очень похоже на него, так как оно также определяет как размеры изображения внутри его контейнера.

содержать значение содержит изображение в своем контейнере. покрытие делает то же самое, но если соотношение сторон изображения и контейнера не совпадает, изображение обрезано. заполнить заставляет изображение растянуть и заполнить свой контейнер. уменьшать выбирает самую маленькую версию изображения для отображения.

 
  #container width: 300px; высота: 300 пикселей;  img ширина: 100%; высота: 100%; соответствие объекта: содержать;  

3. Сдвиг изображений с Объект-положение

Аналогично дополняющему фон положение собственностью фон-размер, есть Объект-положение собственность для Объект посадки, тоже.

Объект посадки имущество перемещает изображение внутри контейнера изображений по заданным координатам. Координаты могут быть определены как абсолютные единицы длины, относительные единицы длины, ключевые слова (Топ, оставил, центр, низ, а также право) или действительная комбинация из них (верхний 20px правый 5px, по центру справа 80px).

 
  #container width: 300px; высота: 300 пикселей;  img ширина: 100%; высота: 100%; положение объекта: 150px 0;  

4. Расположите изображения с вертикальные выравнивания

Мы иногда добавляем (которые являются встроенными по своей природе) рядом с текстовыми строками для дополнительной информации или украшения. В таком случае, выравнивание текста и изображения в желаемое положение может быть немного сложно, если вы не знаете, какое свойство использовать.

вертикальные выравнивания свойство не только для ячеек таблицы. Он также может выравнивать встроенный элемент внутри встроенного блока и, таким образом, может использоваться для выровнять изображение в строке текста. Требуется значительное количество значений, которые могут быть применены к встроенному элементу, поэтому у вас есть много вариантов на выбор.

 
 PDF  
 

5. Теневые изображения с фильтр: падающая тень ()

При незаметном использовании в текстах и ​​прямоугольниках тени могут оживить веб-страницу. То же самое верно для изображений. Изображения с основными формами и прозрачным фоном может извлечь выгоду из раскрывающаяся тень CSS фильтр.

Его аргументы похож на значения свойств CSS, связанных с тенью (текст-тень, коробчатого тень). Первые два представляют вертикальное и горизонтальное расстояние между тенями и изображением, третий и четвертый являются пятно и радиус распространения тени, и последний из них цвет тени.

Как текст-тень, раскрывающаяся тень также создает тень, которая отлито в форму принадлежащего объекта. Таким образом, когда он применяется к изображению, тень принимает форму видимой части изображения.

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

Читайте также: CSS3 Отражение изображения [CSS3 Советы]