РАВ*_*АВИ 516
您可以使用过滤器-webkit-filter和filter:过滤器是很新的浏览器,并且只有在非常现代的浏览器支持.您可以将图像更改为灰度,棕褐色等等(请查看示例).
因此,您现在可以使用过滤器更改PNG文件的颜色.
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">- 但是,实际上是胡萝卜素还是饱和度会对白色图像产生影响？ (16认同)
- 简而言之,大多数浏览器都没有任何通用的解决方案. (12认同)
- 2016年更新:现在几乎所有浏览器都可以使用,除了IE:http://caniuse.com/#feat=css-filters (6认同)
- @datatype_void有时你自己无法控制起始图像.因此,似乎您同意我的观点是有效的,您无法从黑色或白色开始获得任何颜色.哦,我玩了超过5分钟达到这个结论. (3认同)
- 还指定你可以做这样的事情:`.gifcorrect {filter:invert(28%)sepia(100%)hue-rotate(-180deg)saturate(3); 这意味着你可以从黑色和透明或灰度变为彩色,它甚至可以在GIF动画上运行 (3认同)
- 尽管所有这些滤色镜都很好，但它们似乎都不能从白色或黑色变成另一种“鲜艳”颜色（例如红色、绿色等）:(也许我错过了一些东西？ (2认同)
- @AsGoodAsItGets我正在使用滤镜在一系列鲜艳的色彩中为'png`图像着色.`hue-rotate`和`brightness`特别有用.例如,要实现`gold/yellow`颜色:`.class-declaration {filter:hue-rotate(-78deg)brightness(1.6); }`.如果你要做一些像`.class-declaration {filter:hue-rotate(-5deg)brightness(0.6); 你将最终得到一种"绿色"颜色.通过弄乱这些过滤器,我无法达到任何颜色. (2认同)
- @datatype_void我非常具体,我提到了黑色或白色.你可以制作过滤器的组合,从纯黑色或白色开始带你到任何颜色？ (2认同)
- @datatype_void Plus,OP专门询问了透明背景下白色的起始图像. (2认同)
- 这个答案莫名其妙地被高估了。如果OP打算用伪随机颜色替换给定颜色，那就是答案。 (2认同)
Fad*_*lam 72
我找到了这个很棒的codepen示例,您插入了十六进制颜色值,并返回所需的过滤器以将此颜色应用于png
例如,我需要我的png具有以下颜色#1a9790
那么你必须将以下过滤器应用到你的png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
- <3 <3 <3 <3 <3 <3 (8认同)
- 这适用于黑色背景或图像。对于白色元素，尝试调整 invert 参数以获得正确的颜色。 (3认同)
- codepen 基于 MultiplyByZer0 的精彩答案：/sf/ask/3007664901/lack-into-any-given-color-using-only-css-filters/43960991# 43960991 (3认同)
- 我使用以下代码将颜色从蓝色更改为白色：`filter：invert（1％）棕褐色（1％）saturate（1％）色相旋转（1deg）亮度（1000％）对比度（80％）;` (2认同)
- 作者当之无愧的雕像！（请注意：亮度（0）饱和（100％）可选的前置选项可以消除任何疑问） (2认同)
- 如果有人需要它，这里是此代码的 TS 转换 https://gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08 (2认同)
Jul*_*lle 55
您可能想看一下Icon字体.http://css-tricks.com/examples/IconFont/
编辑:我在我的最新项目中使用Font-Awesome.你甚至可以引导它.简单地把它放在你的<head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
然后继续添加一些像这样的图标链接:
<a class="icon-thumbs-up"></a>
这是完整的备忘单
- 编辑 -
Font-Awesome在新版本中使用不同的类名,可能是因为这会使CSS文件显着缩小,并避免使用模糊的css类.所以现在你应该使用:
<a class="fa fa-thumbs-up"></a>
编辑2:
刚发现github也使用自己的图标字体:Octicons 它可以免费下载.他们还提供了一些如何创建自己的图标字体的技巧.
Kir*_*l G 24
img标签具有与其他任何一样的背景属性.如果你有一个透明形状的白色PNG,比如模板,那么你可以这样做:
<img src= 'stencil.png' style= 'background-color: red'>
- 我希望白色部分的颜色不同,而不是透明部分. (142认同)
- @Wesley你需要反转图像(所以白色位变为透明,其余为白色),您可以使用自己喜欢的图像编辑器和遮罩来完成. (8认同)
- @CharlesGoodwin只有这样才能将图像放在白色背景中. (4认同)
- 到目前为止我找到的最佳解决方案。太糟糕了，只有在您的网站上使用纯色背景色时，它才有效 (2认同)
Vas*_*sin 24
我已经能够使用SVG过滤器做到这一点.您可以编写一个过滤器,将源图像的颜色与要更改的颜色相乘.在下面的代码片段中,泛色是我们想要将图像颜色更改为的颜色(在这种情况下为红色.)feComposite告诉过滤器我们如何处理颜色.具有算术的feComposite的公式是(k1*i1*i2 + k2*i1 + k3*i2 + k4)其中i1和i2相应地是in/in2的输入颜色.因此,仅指定k1 = 1意味着它将仅执行i1*i2,这意味着将两种输入颜色相乘.
注意:这仅适用于HTML5,因为它使用的是内联SVG.但我认为通过将SVG放在一个单独的文件中,您可以使用旧版浏览器.我还没有尝试过这种方法.
这是片段:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask1">
<feFlood flood-color="#ff0000" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask2">
<feFlood flood-color="#00ff00" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask3">
<feFlood flood-color="#0000ff" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>- 对于带有 alpha 的图标，可以将 `<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />` 替换为 ` <feComposite in="flood" in2="SourceAlpha" operator="atop"/>`（适用于白色、彩色和黑色） (3认同)
- 男人,你在这个答案上被抢劫了.任何人都希望将图像着色到超出过滤器的范围:hue-rotate可以做到 - 这是做到这一点的方法. (2认同)
- 这可以说是最好的答案，值得更多关注。 (2认同)
ben*_*e89 20
是的:)
Surfin'Safari - 博客存档»CSS面具
WebKit现在支持CSS中的alpha掩码.蒙版允许您使用可用于在最终显示中敲除该框的部分的图案来覆盖框的内容.换句话说,您可以根据图像的alpha来剪切复杂的形状.
[...]
我们引入了新属性,为Web设计人员提供了对这些掩码及其应用方式的大量控制.新属性类似于已存在的背景和边框图像属性.Run Code Online (Sandbox Code Playgroud)-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
- 可悲的是,这似乎只是webkit而博客通过使用合成图像而非实际示例作弊.这个答案有点红鲱鱼. (3认同)
Joh*_*ers 17
在大多数浏览器中,您可以使用过滤器:
在
<img>元素和其他元素的背景图像上并在CSS中静态设置它们,或者使用JavaScript动态设置它们
请参阅下面的演示.
<img> 分子
您可以将此技术应用于<img>元素:
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />背景图片
您可以将此技术应用于背景图像:
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<div id="original"></div>
<div id="changed"></div>JavaScript的
您可以使用JavaScript在运行时设置过滤器:
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}<div id="original"></div>
<div id="changed"></div>- 问题是关于用透明背景着色白色图像.`hue-rotate`不适用于白色. (6认同)
chr*_*lls 15
认为我有一个解决方案,这是a)5年前你正在寻找的,b)比这里的其他代码选项稍微简单一些.
使用任何白色png(例如透明背景上的白色图标),您可以添加:: after选择器进行重新着色.
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
看到这个codepen(在悬停时应用颜色交换):http://codepen.io/chrscblls/pen/bwAXZO
- @chrscblls 该链接已失效。 (3认同)
小智 12
当将图片从黑色更改为白色或从白色更改为黑色时，色调旋转滤镜不起作用，因为从技术上讲，黑色和白色不是颜色。相反，黑白颜色变化（从黑色到白色或反之亦然）必须使用反转滤镜属性来完成。
.img1 {
filter: invert(100%);
}
Reh*_*mat 10
对我有用的最简单的一行：
filter: opacity(0.5) drop-shadow(0 0 0 blue);
您可以将不透明度从0调整为1，以使颜色更浅或更深。
- 重复投影 2-3 次以使其更强 (8认同)
- @swisswiss 不要重复投影，添加一个 >100% 的饱和滤镜，这样它看起来像“filter: opacity(0.5) drop-shadow(0 0 0 blue) saturate(1000%);” 这只需一次即可完成所有操作，这将解决 SMAG 带来的问题。 (3认同)
小智 9
/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
小智 8
我在谷歌搜索时发现了这一点，发现最适合我的方法是
的HTML
<div class="img"></div>
的CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
尝试这个：
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
小智 8
使用这个很棒的 codepen 示例，您插入十六进制颜色值，它会返回将此颜色应用于 png 所需的过滤器
CSS 过滤器生成器从黑色转换为目标十六进制颜色
例如我需要我的 png 具有以下颜色 #EF8C57
那么你必须对你的 png 结果应用以下过滤器：
filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
我需要一种特定的颜色,所以过滤器对我不起作用.
相反,我创建了一个div,利用CSS多个背景图像和线性渐变功能(它自己创建一个图像).如果使用叠加混合模式,您的实际图像将与生成的包含所需颜色的"渐变"图像混合(此处为#BADA55)
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}<div class="colored-image"></div>回答是因为我正在为此寻找解决方案。
如果您有白色或黑色背景，@chrscbls 答案中的钢笔效果很好，但我的不是。同样，图像是用 ng-repeat 生成的，所以我的 css 中没有它们的 url 并且你不能在 img 标签上使用 ::after 。
所以，我想了一个变通办法，并认为如果人们在这里绊倒，它可能会有所帮助。
所以我所做的与三个主要区别几乎相同：
- url 在我的 img 标签中，我将它（和一个标签）放在另一个 div 中，::after 将在该 div 上工作。
- 'mix-blend-mode' 设置为 'difference' 而不是 'multiply' 或 'screen'。
- 我添加了一个 ::before 具有完全相同的值，因此 ::after 将执行 ::before 所做的“差异”的“差异”并取消它自己。
要将其从黑色更改为白色或将白色更改为黑色，背景颜色需要为白色。从黑色到彩色，您可以选择任何颜色。从白色到彩色，您需要选择与您想要的颜色相反的颜色。
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
https://codepen.io/spaceplant/pen/oZyMYG
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>来源：https : //codepen.io/taryaoui/pen/EKkcu
对我有用的解决方案是使用filter: drop-shadow
过滤器：投影的工作方式与常规不同box-shadow。
filter一种将阴影应用于真实形状（因此它支持透明图像）。
现在的技巧是“隐藏”真实图像并仅显示阴影。
https://jsfiddle.net/d4m8x0qb/2
请注意，我的用例是将图标颜色修改为一种纯色，因此这种方法对我有用，但可能不适用于其他用例
2023 年 8 月编辑：此答案可能会在 iOS 中导致问题。似乎 iPhone 可以切断或根本不显示阴影，因为它在视口内找不到原始图像。如果此解决方案不适合您，请查看此解决方案，它似乎在所有平台和所有浏览器（IE 除外，但谁在乎）上都能正常工作：/sf/answers/5377507691/
您可以使用任何您喜欢的颜色添加阴影，并将原始图像移出视图。
.png-container {
overflow: hidden;
}
.png-container img {
filter: drop-shadow(0px 1000px 0 red);
transform: translateY(-1000px);
}<div class="png-container">
<img src="https://i0.wp.com/opensource.org/wp-content/uploads/2023/03/cropped-OSI-horizontal-large.png?fit=640%2C229&ssl=1" width="128" height="46">
</div>| 归档时间： |
|
| 查看次数： |
780562 次 |
| 最近记录： |