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

通常的调暗方法是更改图像的“不透明度”属性，并在其下方显示一些暗的内容。但是，我的图像是透明的，背景是白色的。所以我想让背景在图像的透明部分保持白色，只让有颜色的像素变暗。这在CSS（最好）或JS中可以实现吗

编辑：示例图像

示例图像：

---

有一个相对较新的CSS属性

过滤器

，它可能实现您所追求的目标

亮度

选项似乎就是您想要的

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

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%);
}

支持是不可能的

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>

<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>

对比度@200%

<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>

<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>

---

如果您想使用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';

函数变暗图像（imageObj，百分比）{
var canvas=document.getElementById（'aCanvas'）；
var context=canvas.getContext（'2d'）；
var x=0；
var y=0；
上下文。drawImage（imageObj，x，y）；
var imageData=context.getImageData（x，y，imageObj.width，imageObj.height）；
var数据=imageData.data；
对于（变量i=0；i

这是一个简单的计算，但正如你所看到的，把它改成更漂亮的东西并不难。因为我们不接触alpha通道，所以透明度保持不变

这是一把小提琴：

---

（浏览器至少在safari中会抱怨交叉源图像，这就是为什么会出现倒数第二行。）

您是否想过不改变图像的不透明度，比如在图像顶部放置一个与图像大小相同的div，不透明度为0.3，背景色为黑色

这可能不是你正在寻找的东西，尽管它值得思考

---

Gab

另一种方法是在div上使用新的CSS

mask

属性（目前仅由webkit完全支持）和变暗

.dim {
  display: none;
  /*Also position it above the image*/
 }

.dim:hover {
 background-color: black;
 opacity: 0.5;
 -webkit-mask: url(image.png) top left / cover;
}

---

制作另一张基本上是你的轮廓的图像，所有不透明像素都是黑色的，将其定位在原始图像的正下方，然后更改原始图像的不透明度。@PitaJ好吧，我也可以只制作暗显图像，只显示它，但我有50张这样的图像，它们可能会更改，因此，这将非常耗时，但我想如果没有更好的解决方案，我将不得不这样做。您可以将其转换为画布并在画布中使其变暗。我认为使用

canvas

元素很有可能实现这一点，但由于我对它了解不多，因此我不想尝试对此给出答案。在网络上浏览类似于

在html画布上绘制不透明度的图像的术语。也许你可以先共享图像，这样我们就可以看到我们正在使用的内容，但是
过滤器
属性可能会提供一些选项？谢谢，这可能是我想要的，但你的小提琴在最新的Firefox中不起作用。有趣的是，它在FF30中工作，但在我更新到FF31时没有。@KonstantinPereyaslov根据MDN Article添加了FF支持，这将如何解决任何问题？图像的透明像素仍将变暗。我很喜欢这一款，因为它将是这种行为最受欢迎的浏览器。