如何用CSS取出图像的颜色？

Question

我的网页上有一张图片，如下所示：

<img src="/Images/content/home.png" alt="" style="float: left;">

是否有CSS属性可用于从图像中获取一些颜色而无需进入photoshop并编辑图像。更好的是，我可以使用任何在线应用程序“处理”图像并删除一些颜色吗？

Answer 1

一个名为vintageJS的优秀 jQuery 插件可以将图像转换为灰度，并且需要无服务器端处理 ...这些都是在查看器浏览器中完成的。

可用于 Firefox ，Chrome和其他浏览器的效果为灰度，模糊边，棕褐色，< strong>去饱和，噪音，亮度，对比度，曲线和更多< / strong>即可。此外，多重效果可以完成！

在参考允许图像处理然后保存图像的在线应用程序时， vintageJS插件有这个很酷的Playground Webpage，允许您上传任何图像，自定义不同的效果飞，并下载您编辑的图像！

Answer 2

如果您想编辑图片，可以使用出色的网络应用

• Pixlr
• Phoenix (by Aviary)

您正在寻找CSS3 / Webkit过滤器。但截至目前，这些仅适用于Chrome Canary和Webkit Nightly。可用效果为灰度，模糊，棕褐色，饱和度，不透明度，亮度，对比度，色调 - 旋转和反转。

资源： CSS3 Filters

相反，您可以设置opacity。

img {  
    opacity: .7;  
    //above line works in Firefox, Safari, Chrome, Opera
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
    // above line works in IE6, IE7, and IE8  
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";  
    // above line is IE8 only
} 

Answer 3

  

我在网上有哪些应用程序可以用来“处理”图像并删除一些颜色？

嗨，杰玛，

您提到您使用的是Photoshop，但不想打开它才能执行此操作。如果灰度级图像是您经常需要做的事情，那么您应该考虑为此创建一个Photoshop“Droplet”。基本上，它允许您创建一个桌面快捷方式，您可以将文件（或文件的文件夹）拖放到＆amp;它将执行你在其中设置的任何自动化任务，例如

1. 打开文件
2. 转换为b / w
3. 另存为[filename] -bw.jpg，质量为80％
4. 关闭文件

Here's a link to Adobe's docs关于从动作创建Droplet以自动执行批处理。批处理图像的另一个选项可能是ImageMagick。

Answer 4

尝试设置图片的opacity。

示例：

img
{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}