本文的目的是学习如何使用 CSS 向图像添加过滤器。 CSS filter属性用于设置元素的视觉效果。此属性主要用于图像内容。
句法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
例子:
HTML
GeeksForGeeks
How to add a filter to a
background image using CSS?
HTML
GeeksForGeeks
The image below is the
normal image
The image below is the
darkened image:
输出:
示例 2:
HTML
GeeksForGeeks
The image below is the
normal image
The image below is the
darkened image:
输出:
支持的浏览器:
- 谷歌浏览器
- IE浏览器
- 火狐
- 歌剧
- 苹果浏览器