如何调暗图像保持透明度不受CSS或JS的影响？

Question

在任何地方建议调整图像的正常方法是改变它的不透明度属性并在其下显示一些黑暗.但是,我的图像具有透明度,并在白色背景上.因此,我希望将背景保持在图像的透明部分白色下,只使具有颜色的像素变暗.这可能在CSS(最好)或JS中做到吗？

编辑:示例图片http://imgur.com/a/Tat9f

示例图片:

Answer 1

有一个相对较新的CSS属性filter可能会实现您的目标.

这个brightness选项似乎就是你所追求的.

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

JSFiddle演示(带亮度和对比度选项)

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

支持非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>

Answer 2

如果你想使用javascript而不是css,那么用HTML画布来做这个并不是特别困难.您只需将画布移动一个图像对象,然后抓住上下文,这将允许您循环并操纵各个颜色通道.当然,没有JS就完全打破了.

function darkenImage(imageObj, percentage) {
    var canvas = document.getElementById('aCanvas');
    var context = canvas.getContext('2d');
    var x =0;
    var y =0;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
       // red
       data[i] = percentage * data[i];
       // green
       data[i + 1] = percentage * data[i + 1];
       // blue
       data[i + 2] =  percentage * data[i + 2] ;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);
  }
var anImage = new Image();
anImage.onload = function() {
    darkenImage(this, .5);
  };
anImage.crossOrigin = 'http://api.imgur.com/crossdomain.xml'
anImage.src = 'http://i.imgur.com/GnMumrk.png';

这是一个简单易懂的计算方法,但正如你所看到的那样,将它变成一个有点发烧友的东西并不难.由于我们不触摸Alpha通道,因此透明度保持不变.

这是一个小提琴:http://jsfiddle.net/markm/kwsogrdt/
(浏览器至少在safari中抱怨交叉原始图像,这就是倒数第二行的原因.)