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

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

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

Читайте также: 3 способа превратить веб-изображения в оттенки серого

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

img {
рендеринг изображений: пиксельный;
}

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

Содержимое содержит изображение в своем контейнере. cover делает то же самое, но если пропорции изображения и контейнера не совпадают, изображение обрезается. В результате заполнения изображение растягивается и заполняет его контейнер. При уменьшении выбирается самая маленькая версия изображения для отображения.

div id=’container’>
<img src=”https://www.hongkiat.com/rose.png” alt=”цветок розы ‘>

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

3. Сдвиг изображений с помощью положения объекта
Как и у дополняющего свойства background-position background-size, есть Объект-положение свойство для подгонки объекта тоже.

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

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

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

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

PDF

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

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

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

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

img {
фильтр: падающая тень (0 0 5px синий);
}

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

«>