Функция CSS image() похожа на функцию url(), но с дополнительными возможностями, которые позволяют нам указать изображение с опциями отката и аннотациями.
Ключевые особенности:
- Использует медиафрагменты для вырезания фрагмента.
- Указывает запасные изображения
- Использование сплошного цвета в качестве изображения
- Указание направленности изображения: ltr — слева направо или rtl — справа налево.
/* Syntax of image() function */
/*
image(<image-tags> [ <image-src> , <color> ] )
<image-tags> = ltr | rtl
ltr - ltr for left-to-right & rtl - right-to-left.
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>
*/
/* Example-1: Cropping portion of an image*/
.logo {
background-image: image('myimage.webp#xywh=338,324,360,390');
}
/* Example-2: Putting color on top of a background image */
.logo {
background-image:
image(rgba(0, 0, 0, 0.25)),
url("https://mdn.mozillademos.org/files/12053/firefox.png");
background-size: 25%;
background-repeat: no-repeat;
}