如何使用 CSS 或 JS 使图像变暗而不影响透明度？

到处建议的调暗图像的正常方法是更改​​其不透明度属性并在其下方显示黑色的东西。但是，我的图像具有透明度并且位于白色背景上。所以我想将背景保持在图像白色的透明部分下，只使有颜色的像素变暗。这可以在 CSS（最好）或 JS 中完成吗？

编辑：示例图像https://i.stack.imgur.com/AoAiS.jpg https://i.stack.imgur.com/AoAiS.jpg

示例图片：

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

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

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

JSFiddle 演示（具有亮度和对比度选项） http://jsfiddle.net/Paulie_D/warbe532/4/

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 过滤器 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

支持非IE查看CanIUse.com http://caniuse.com/css-filters

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>