我正在尝试使用CSS将图像更改为红色。
目前我所拥有的内容如下:
img {
-webkit-filter: invert(90%); filter: invert(90%);
}
img {
-webkit-filter: invert(90%); filter: invert(90%);
}
您需要结合两个过滤器saturate
和hue
,以下是一种可能的组合,以获得“红色”(如果使用颜色选择器,则会生成默认的web“红色”-#FF0000
或#F00
,因为您可以选择您的红色,更强或更轻。
saturate
和hue
这两个滤镜,以获取“红色”(如果使用颜色选择器,则会生成默认的Web“红色”-#FF0000
或#F00
,因为您可以选择更深或更浅的红色)。img {
webkit-filter: saturate(100) hue-rotate(-140deg);
filter: saturate(100) hue-rotate(-140deg)
}
<img class="screencap" src="https://istack.dev59.com/speoA.webp">
据称,在第一个代码片段中存在一个错误(与@kaiido聊天后得知),这个错误会使Windows中的FF在img
标签中变成红色,而在其他操作系统和浏览器中则保持粉色(因此我将在bugzilla上报告这个错误)
因此,有一种方法可以跨浏览器使用混合过滤器来实现这一点。
img {
-webkit-filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);
filter: brightness(0.6)contrast(3.4)hue-rotate(217deg)saturate(9.9);
}
<img class="screencap" src="https://istack.dev59.com/speoA.webp">
使用一些滤镜样式更改PNG图像的颜色
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #03030a;
min-width: 800px;
min-height: 400px
}
img {
width: 20%;
float: left;
margin: 0;
}
/*Filter styles*/
.saturate {
filter: saturate(3);
-webkit-filter: saturate(3);
}
.grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.contrast {
filter: contrast(160%);
-webkit-filter: contrast(160%);
}
.brightness {
filter: brightness(0.25);
-webkit-filter: brightness(0.25);
}
.blur {
filter: blur(3px);
-webkit-filter: blur(3px);
}
.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
.huerotate {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
}
.opacity {
filter: opacity(50%);
-webkit-filter: opacity(50%);
}
</style>
</head>
<body>
<h2>Change PNG image color</h2>
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity">
</body>
</html>
你需要使用过滤器函数给图像上色。例如,将白色转换为黑色,反之亦然,可以使用类似于 filter .invert(100%) 的方式。
img {
filter: saturate(100) hue-rotate(241.5deg);
}
rgb(255,0,0)
的CSS滤镜代码:brightness(0%) saturate(100%) invert(16%) sepia(93%) saturate(6447%) hue-rotate(1deg) brightness(96%) contrast(118%)
,其中我只是添加了brightness(0%) saturate(100%)
以先将其转换为黑色。(https://jsfiddle.net/mhu4uczj/10/) - Kaiido