通过 CSS 改变图像的颜色
Change color of image via CSS
我正在尝试使用 css 将图像更改为红色。
这是我目前所拥有的
img {
-webkit-filter: invert(90%); filter: invert(90%);
}
img {
filter: saturate(100) hue-rotate(241.5deg);
}
您需要组合两个过滤器 saturate
和 hue
,下面是获得 "red" 的可能组合(如果您使用颜色选择器,它将生成默认网页 "red" - #FF0000
或只是 #F00
,因为您可以选择红色,更强或更亮。
img {
webkit-filter: saturate(100) hue-rotate(-140deg);
filter: saturate(100) hue-rotate(-140deg)
}
<img class="screencap" src="https://i.stack.imgur.com/speoA.png">
更新
据称,在第一个片段中有一个错误(在与 @kaiido 聊天之后),它只是在 FF 中使用标签 img
中的 Windows 变红 - 同时保持在其他操作系统的其他浏览器中为粉红色,(因此我将在 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://i.stack.imgur.com/speoA.png">
使用一些滤镜样式更改 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%).
我正在尝试使用 css 将图像更改为红色。 这是我目前所拥有的
img {
-webkit-filter: invert(90%); filter: invert(90%);
}
img {
filter: saturate(100) hue-rotate(241.5deg);
}
您需要组合两个过滤器 saturate
和 hue
,下面是获得 "red" 的可能组合(如果您使用颜色选择器,它将生成默认网页 "red" - #FF0000
或只是 #F00
,因为您可以选择红色,更强或更亮。
img {
webkit-filter: saturate(100) hue-rotate(-140deg);
filter: saturate(100) hue-rotate(-140deg)
}
<img class="screencap" src="https://i.stack.imgur.com/speoA.png">
更新
据称,在第一个片段中有一个错误(在与 @kaiido 聊天之后),它只是在 FF 中使用标签 img
中的 Windows 变红 - 同时保持在其他操作系统的其他浏览器中为粉红色,(因此我将在 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://i.stack.imgur.com/speoA.png">
使用一些滤镜样式更改 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%).