Home > Article > Web Front-end > Can css3 remove color from images?
Can css3 remove color from images?
- WBOYOriginal
- 2022-03-22 11:11:291687browse
css3 can remove color from images; you can use filter with the grayscale attribute to remove color from images. The filter attribute is used to define the visual effect of the element. The grayscale attribute can convert the image into a grayscale image. The syntax is "picture Element {filter:grayscale(100%}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
Can css3 remove color from images
css3 can remove color from images
The filter attribute defines the visual effect (for example: blur and saturation) of the element (usually ) .
The syntax is:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Where:
grayscale(%)
The image can be converted to a grayscale image. The value defines the scale of the conversion.
If the value is 100%, it will be completely converted to grayscale image. If the value is 0%, the image will not change. The value is between 0% and 100%, which is the linear multiplier of the effect. If not set, the value defaults to 0;
Examples are as follows:
<html>
<head>
<style>
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>将图像去色:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
</body>
</html>Output results:
(Learning video sharing: css video tutorial)
The above is the detailed content of Can css3 remove color from images?. For more information, please follow other related articles on the PHP Chinese website!