シルエットCSSを使用したPNG画像

Question

透明性を備えたPNG画像をシルエットのように完全に黒く見せるためにCSSを取得できる方法を知っている人は誰ですか？これに

：

それは私がしたい理由は、画像の多くのためだ、このような何かから行く他のwords- で

Photoshopを使用しないでください。

Answer 1

私はあなたがシルエットを得るためにfilter: contrast(0%) brightness(50%)のようなイメージのスタイルに適用することができます多分あなたはリンゴ

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

Answer 2

私はそれが純粋なCSSでどうやってできるのか分かりません。 Javascriptはそれを達成できるかもしれませんが、代わりにサーバーサイドプログラミングの使用を検討することがあります。 PHPを使用すると、元のPNGの複製をサーバー上に作成し、非透明ピクセルを単一の色に置き換えることができます。これは透かし機能に似ています。

Answer 3

内部の軽いピクセルで、特にそれを絞り込むことができ、キャンバスを使用してこのコードを試してみました。接頭辞を忘れないでください。

Answer 4

Nowdaysは、フィルタは、あまりにも行うことができ、ブレンドモードを混在させる組み合わせ：

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>