是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
根据robertc的回答:
为了得到从彩色图像到灰度图像的正确转换,而不是像这样使用矩阵:
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0
你应该像这样使用转换矩阵:
0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0 0 0 1
这对于基于RGBA(红-绿-蓝-alpha)模型的所有类型的图像都可以正常工作。
关于为什么你应该使用矩阵的更多信息,我发布了更可能的robertc的一个检查以下链接:
亮度和色差信号 马格斯的回答:“colorvalue中的greyscalevalue”@stackoverflow部分:编辑2:@Hans Passant Charles A. Bouman -普渡大学-模拟电视第20和21页 在这里你可以找到一些c#和VB代码
其他回答
一种新的方法已经在现代浏览器上出现了一段时间了。
背景混合模式可以让你得到一些有趣的效果,其中之一是灰度转换
设置在白色背景上的luminosity值允许这样做。 (鼠标悬停,灰色显示)
test { 宽度:300 px; 身高:200 px; 背景:url(“http://placekitten.com/1000/750”),白色; background-size:封面; } test:{徘徊 background-blend-mode:光度; } < div class = "测试" > < / div >
亮度取自图像,颜色取自背景。因为它总是白色的,所以没有颜色。
但它允许更多。
你可以将效果设置为3层。第一个是图像,第二个是黑白渐变。如果你应用混合模式,你会得到一个白色的结果,就像之前在白色部分,但原始图像在黑色部分(乘白色得到白色,乘黑色没有效果)。
在渐变的白色部分,你得到了和以前一样的效果。在渐变的黑色部分,您正在混合图像本身,结果是未经修改的图像。
现在,所有需要做的就是移动渐变来获得动态效果:(悬停可以看到颜色)
div { 宽度:600 px; 身高:400 px; } test { 背景:url(“http://placekitten.com/1000/750”), 线性渐变(0deg,白色33%,黑色66%),url(“http://placekitten.com/1000/750”); 背景-位置:0px 0px 0% 0px 0px; 背景尺寸:覆盖,100% 300%,覆盖; 背景-混合模式:亮度,倍增; 过渡:全部为2s; } test:{徘徊 背景位置:0px 0px, 0px 66%, 0px 0px; } < div class = "测试" > < / div >
参考
兼容性矩阵
根据brillout.com的回答和Roman Nurik的回答,稍微放宽了“无SVG”的要求,您可以仅使用单个SVG文件和一些CSS来降低Firefox中的图像饱和度。
您的SVG文件将如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>
将其保存为resources.svg,从现在开始,它可以用于任何您想要更改为灰度的图像。
在CSS中,使用Firefox特定的filter属性引用过滤器:
.target {
filter: url(resources.svg#desaturate);
}
如果你喜欢,也可以添加MS专有的,将该类应用到任何你想转换为灰度的图像(适用于Firefox >3.5, IE8)。
编辑:这里有一篇不错的博客文章,描述了在SalmanPK的答案中使用新的CSS3过滤器属性与这里描述的SVG方法相一致。使用这种方法,你最终会得到这样的结果:
img.desaturate{
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: url(resources.svg#desaturate); /* older Firefox */
filter: grayscale(100%); /* Current draft standard */
}
更多的浏览器支持信息请点击这里。
如果您能够使用JavaScript,那么这个脚本可能就是您正在寻找的。它跨浏览器工作,目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。
http://james.padolsey.com/demos/grayscale/
旧浏览器的替代方案可能是使用伪元素或内联标签产生的掩码。
绝对定位悬停在一个img(或文本区域,不需要点击或选择)可以密切模仿的效果的颜色比例,通过rgba()或半透明png。
它不会给出一个单一的颜色尺度,但会将颜色的阴影超出范围。
在代码笔上用10种不同的颜色通过伪元素进行测试,最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)
Webkit支持CSS过滤器。所以我们现在有了一个跨浏览器的解决方案。
img { 过滤器:灰色;/* ie6-9 */ -webkit-filter:灰度(1);/*谷歌Chrome, Safari 6+ & Opera 15+ */ 过滤器:灰度(1);/* Microsoft Edge和Firefox 35+ */ } /*禁用悬停时的灰度*/ img:{徘徊 -webkit-filter:灰度(0); 过滤器:没有; } < img src = " https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png " >
Internet Explorer 10怎么样?
你可以用灰色填充。