精品课程云网站建设微信网站名
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。 |