是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
事实上,如果我记得正确地使用了一个专有的CSS属性,用IE更容易做到这一点。试试这个滤镜:灰色,来自http://www.ssi-developer.net/css/visual-filters.shtml
Ax的方法只是使图像透明,并在其后面有黑色背景。你肯定会说这是灰度图。
虽然您不想使用Javascript,但我认为您必须使用它。您也可以使用服务器端语言来实现这一点。
其他回答
你可以使用jFunc的一个函数——使用函数"jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
如果您或其他将来面临类似问题的人愿意使用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);
?>
根据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 */
}
更多的浏览器支持信息请点击这里。
一个糟糕但可行的解决方案是:使用Flash对象渲染图像,然后在Flash中为您提供所有可能的转换。
如果您的用户使用尖端浏览器,并且Firefox 3.5和Safari 4支持它(我不知道是否支持),您可以调整图像的CSS颜色配置文件属性,将其设置为灰度ICC配置文件URL。但那有很多假设!
作为对其他人答案的补充,可以在FF上降低图像的饱和度,而不会出现SVG矩阵的头痛问题:
<feColorMatrix type="saturate" values="$v" />
其中$v在0和1之间。相当于filter:grayscale(50%);。
生活例子:
.desaturate { filter: url("#desaturate"); -webkit-filter: grayscale(50%); } figcaption{ background: rgba(55, 55, 136, 1); padding: 4px 98px 0 18px; color: white; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 100%; font-family: "Helvetica"; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="saturate" values="0.4"/> </filter> </svg> <figure> <figcaption>Original</figcaption> <img src="http://www.placecage.com/c/500/200"/> </figure> <figure> <figcaption>Half grayed</figcaption> <img class="desaturate" src="http://www.placecage.com/c/500/200"/> </figure>
MDN参考资料