javascript - 如何使用 CSS 或 JS 使图像变暗以保持透明度不变？

Question

使随处可见的图像变暗的常规方法是更改​​其不透明度属性并在其下方显示一些暗色。但是，我的图像具有透明度并且在白色背景上。所以我想保持图像透明部分下的背景为白色，只使有颜色的像素变暗。这可以在 CSS(最好)或 JS 中完成吗？

编辑:样本图像 http://imgur.com/a/Tat9f

示例图片:

Answer 1

有一个相对较新的 CSS 属性 filter 可能会实现您所追求的。

brightness 选项似乎就是您所追求的。

编辑 - 通过 URL 添加对 FF 的临时支持

JSFiddle Demo (with brightness and contrast options)

CSS

img {
width:250px;
}
#one:hover {
    -webkit-filter:brightness(50%);
    -moz-filter:brightness(50%);
    filter: url(#brightness); /* required for FF */
    filter:brightness(50%);
}
#two:hover {
    -webkit-filter:contrast(50%);    
    -moz-filter:contrast(50%);
     filter: url(#contrast);
    filter:contrast(50%);
}

MDN on Filter

支持非 IE，请参阅 CanIUse.com

FF 支持(在撰写本文时)需要定义 SVG 滤镜

50% 时的亮度

<svg height="0" xmlns="http://www.w3.org/2000/svg">

    <filter id="brightness">
        <feComponentTransfer>
            <feFuncR type="linear" slope=".5" />
            <feFuncG type="linear" slope=".5" />
            <feFuncB type="linear" slope=".5" />
        </feComponentTransfer>
    </filter>

</svg>

对比度 @ 200%

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="contrast">
        <feComponentTransfer>
            <feFuncR type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncG type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
            <feFuncB type="linear" slope="2" intercept="-(0.5 * 2) + 0.5" />
        </feComponentTransfer>
    </filter>
</svg>