image - 如何将背景图像淡化为透明？

Question

这是一张相关图片:

我想实现类似于图片右侧所示的效果。但我还有一个父容器，它有自己的背景图像，而不是纯色。

有什么建议吗？

编辑: 忘了补充，跨浏览器兼容性很重要。 (或者至少是 Firefox)。

Answer 1

我只能想到一种纯 CSS 解决方案，它简直是疯了。

假设您的图片的宽度为 100px。你必须创建一个 100px 宽的 div 并给它 100 个子级，每个子级 1px 宽，每个都有相同的 background(相应地定位)并且每个都有从 0(第一个 child )到 .99 的 opacity (最后一个 child )。

就个人而言，我认为这很疯狂，我永远不会使用这种方法。

Rory O'Kane 提出了一个漂亮而干净的解决方案，我还有另一个涉及 JavaScript 的想法。

基本上，您的想法是使用 canvas 元素 ( support )，在其上绘制图像，遍历其像素并调整每个像素的 alpha。

demo

(向下滚动查看结果)

相关HTML:

<div class='parent'>
  <canvas id='c' width='575' height='431'></canvas>
</div>

相关CSS(在父级设置背景图片)

.parent {
  background: url(parent-background.jpg);
}

JavaScript:

window.onload = function() {
  var c = document.getElementById('c'), 
      ctxt = c.getContext('2d'), 
      img = new Image();
  
  img.onload = function() {
    ctxt.drawImage(img, 0, 0);
    var imageData = ctxt.getImageData(0, 0, 575, 431);
    for(var i = 0, n = imageData.data.length; i < n; i += 4) {
      imageData.data[i + 3] = 255*((i/4)%575)/575;
    }
    ctxt.putImageData(imageData, 0, 0);
  };
  /* images drawn onto the canvas must be hosted on the same web server 
  with the same domain as the code executing it */
  /* or they can be encoded like in the demo */
  img.src = 'image-drawn-on-canvas.jpg';
};