The CSS image() function is similar to the url() function, but with extra features that let us specify an image with fallback options and annotations.
Key features:
- Uses media fragments to clip out a portion
- Specifies fallback images
- Uses a solid color as an image
- Specifies the directionality of image, ltr for left to right or rtl for right to left
/* 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;
}
Top comments (0)