css更改图片颜色,比较时候颜色单一的图片,比如logo之类的 css中的 filter 属性定义元素(通常是 <img>)的视觉效果(如模糊和饱和度)
img{
-webkit-filter: invert(51%) sepia(94%) saturate(6433%) hue-rotate(190deg) brightness(93%) contrast(101%);
filter: invert(51%) sepia(94%) saturate(6433%) hue-rotate(190deg) brightness(93%) contrast(101%);
}这个代码片段是CSS样式,用于在网页上为图片元素 (img) 添加一系列的滤镜效果。具体来说,它通过 -webkit-filter 和 filter 属性来实现这些效果。下面是每个滤镜的具体含义:
-  invert(51%):将图像的颜色反转51%。即把图像的颜色变为它们的补色,反转比例为51%。
-  sepia(94%):将图像转换为深褐色调,类似于旧照片效果,深褐色比例为94%。
-  saturate(6433%):增加图像的饱和度,使颜色更加鲜艳,饱和度为原来的6433%。
-  hue-rotate(190deg):改变图像的色相,将色相顺时针旋转190度。
-  brightness(93%):调整图像的亮度,使图像的亮度变为原来的93%。
-  contrast(101%):调整图像的对比度,使对比度变为原来的101%。
这些滤镜组合在一起,可以产生独特的视觉效果,可能用于特定的设计需求或视觉效果。
滤镜函数
注释:使用百分比值(例如 75%)的滤镜,也接受该值是十进制(例如 0.75)。
| 滤镜 | 描述 | 
|---|---|
| none | 默认值。规定无效果。 | 
| blur(px) | 对图像应用模糊效果。较大的值将产生更多的模糊。 如果为指定值,则使用 0。 | 
| brightness(%) | 调整图像的亮度。 
 | 
| contrast(%) | 调整图像的对比度。 
 | 
| drop-shadow(h-shadow v-shadow blur spread color) | 对图像应用阴影效果。 可能的值: 
 blur -可选。这是第三个值,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。 spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。 注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。 color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。 这个例子创建了红色的阴影,水平和垂直方向均为 8px,带有 10px 的模糊效果: filter: drop-shadow(8px 8px 10px red); 提示:这个滤镜类似 box-shadow 属性。 | 
| grayscale(%) | 将图像转换为灰阶。 
 注释:不允许负值。 | 
| hue-rotate(deg) | 在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg,代表原始图像。 注释:最大值是 360deg。 | 
| invert(%) | 反转图像中的样本。 
 注释:不允许负值。 | 
| opacity(%) | 设置图像的不透明度级别。opacity-level 描述了透明度级别,其中: 
 注释:不允许负值。 提示:这个滤镜类似 opacity 属性。 | 
| saturate(%) | 设置图像的饱和度。 
 注释:不允许负值。 | 
| sepia(%) | 将图像转换为棕褐色。 
 注释:不允许负值。 | 
| url() | url() 函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点。实例: filter: url(svg-url#element-id) | 
| initial | 将此属性设置为其默认值。参阅 initial。 | 
| inherit | 从其父元素继承此属性。参阅 inherit。 |