使用 CSS 对 PNG 图像进行剪影答案

【问题标题】：Silhouette a PNG image using CSS使用 CSS 对 PNG 图像进行剪影
【发布时间】：2011-05-12 01:22:10
【问题描述】：

有谁知道我可以让 CSS 使具有透明度的 PNG 图像看起来像剪影一样完全变黑？

换句话说—— 从这样的事情出发：

对此：

这是为了很多图像，这就是为什么我想避免通过 Photoshop 来做。

【问题讨论】：

我很确定这是“CSS 做不到”的示例之一。你只需要进入 Photoshop（实际上很简单，不应该超过两分钟 :)）

标签： css image image-processing

【解决方案1】：

如今，过滤器与混合混合模式相结合也可以：

span {/* to be used to lay the 'blender mask' over img */
  position: relative;
  display: inline-block;
  overflow:hidden;
}

span img {
  display: block;/* erase gap */
  max-width:45vw;
  filter: contrast(150%);
}
span + span img {
  filter: contrast(120%) saturate(0%);/* saturate(0%) is  similar to grayscale(100%) */
}

span:before {
  content: '';
  z-index: 1;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  filter: contrast(10000%) brightness(0) saturate(100%) grayscale(100%);
  mix-blend-mode: color-burn;/* bake it to black */
  animation : span 2s infinite alternate;
}
@keyframes span {
  from{
    transform:translate(-100%,0)
  }
  25%,50% {
    transform:translate(0,0);
  }
  to{
    transform:translate(100%,0)
  }
}

<span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>
<span><img src="https://i.stack.imgur.com/somZ7.jpg"/></span>

【讨论】：

【解决方案2】：

您可以应用filter: contrast(0%) brightness(50%) 之类的图像样式来获得轮廓。不要忘记前缀。

【讨论】：

【解决方案3】：

我尝试了这段使用画布的代码，也许你可以改进它，特别是在苹果内部较亮的像素上

<img id="canvasSource" src="apple.jpg" />

<br />

<canvas id="area" width="264" height="282"></canvas>

<!-- Javascript Code -->
<script type="text/javascript">
    window.onload = function() {
        var canvas = document.getElementById("area");
        var context = canvas.getContext("2d");
        var image = document.getElementById("canvasSource");
        context.drawImage(image, 0, 0);

        var imgd = context.getImageData(0, 0, 264, 282);
        var pix = imgd.data;
        var blackpixel = 21;
           for (var i = 0, n = pix.length; i < n; i += 4) {

            //console.log(pix[i], pix[i+1], pix[i+2]);
            if (i > 3) {
               if ((Math.abs(pix[i-3] - pix[i]) > 10) &&
                   (Math.abs(pix[i-2] - pix[i+1]) > 10) &&
                   (Math.abs(pix[i-1] - pix[i+2]) > 10)
                ) {

                   pix[i  ] = blackpixel;  
                   pix[i+1] = blackpixel;  
                   pix[i+2] = blackpixel;

               }
            }
            else {
               if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) {
                  pix[i  ] = blackpixel;  
                  pix[i+1] = blackpixel;  
                  pix[i+2] = blackpixel;
               }
         }

        }
        context.putImageData(imgd, 0, 0);       

    };
</script>

【讨论】：

Rad 解决方案，fcalderan！只需添加 var blackpixel = 0; （仅供偶然发现此代码的任何人使用）。

【解决方案4】：

我不明白如何使用纯 css 来完成。 Javascript 可能能够实现它，但您可以考虑改用服务器端编程。使用 php，您可以在服务器上复制原始 png，并用单一颜色替换不透明的像素。它类似于水印功能。

【讨论】：

你能想出一个通过 JavaScript 的方法吗？这是为我的一个班级的一名学生准备的，我们只是在使用客户端代码——所以虽然我可以用 PHP GD 解决这个问题，但我正在尝试找到一个适用于我们正在使用的技术的解决方案。跨度>
苏珊，我找不到任何不依赖服务器处理的方法。如果您创建解决方案，请在此处发布指向它的链接。