是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
更新:我把它做成了一个完整的GitHub回购，包括针对IE10和IE11的JavaScript polyfill: https://github.com/karlhorky/gray
我最初使用SalmanPK的答案，但后来创建了下面的变体，以消除SVG文件所需的额外HTTP请求。内联SVG适用于Firefox 10及以上版本，低于10的版本甚至不再占全球浏览器市场的1%。
从那以后，我一直在这篇博文中更新这个解决方案，在演示中增加了对退色的支持，对SVG的IE 10/11支持，以及部分灰度的支持。
img.grayscale {
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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>#grayscale");
/* IE 6-9 */
filter: gray;
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(100%);
}
img.grayscale.disabled {
filter: none;
-webkit-filter: grayscale(0%);
}
其他回答
webkit中对本地CSS过滤器的支持已从当前版本19.0.1084.46添加
所以-webkit-filter:灰度(1)将工作，这是更容易为webkit的SVG方法…
如果您或其他将来面临类似问题的人愿意使用PHP。 (我知道你说HTML/CSS，但也许你已经在后端使用PHP) 下面是一个PHP解决方案:
我从PHP GD库中获得了它，并添加了一些变量来自动化这个过程…
<?php
$img = @imagecreatefromgif("php.gif");
if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);
// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');
// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>
用CSS实现灰度最简单的方法是通过filter属性。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
该属性仍然不完全支持，并且仍然需要-webkit-filter属性来支持所有浏览器。
下面是一个用于LESS的mixin，它可以让你选择任何不透明度。为纯CSS以不同的百分比填写变量。
这里有个小提示，它使用饱和类型的矩阵所以你不需要做任何花哨的事情来改变百分比。
.saturate(@value:0) {
@percent: percentage(@value);
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(@percent); /* Current draft standard */
-webkit-filter: grayscale(@percent); /* New WebKit */
-moz-filter: grayscale(@percent);
-ms-filter: grayscale(@percent);
-o-filter: grayscale(@percent);
}
然后使用它:
img.desaturate {
transition: all 0.2s linear;
.saturate(0);
&:hover {
.saturate(1);
}
}
你可以使用jFunc的一个函数——使用函数"jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
