使用CSS剪影一個PNG圖像

任何人都知道一種方法，我可以讓CSS製作一個PNG圖像，透明度看起來像一個輪廓完全變黑嗎？使用CSS剪影一個PNG圖像

在其他words- 從東西走向是這樣的：

要這樣：

alt text

這對大量的圖片這就是爲什麼我想避免通過Photoshop來做到這一點。

來源

2010-11-18 Susan

我敢肯定這是那些「CSS不能做」的例子之一。你只需要進入Photoshop（其實很簡單，不應該超過兩分鐘:)） – Kyle 2010-11-18 14:10:03

我想這個代碼，使用畫布，也許你可以完善它特別是在輕像素蘋果

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

來源

2010-11-18 15:01:25

Rad解決方案，fcalderan！只需要添加var blackpixel = 0; （對於任何絆倒這個代碼的人）。 – Susan 2010-11-19 21:26:35

我不知道如何用純CSS來完成。 Javascript可能會達到它，但你可以考慮使用服務器端編程。用php你可以在服務器上覆制你的原始png，並用一種顏色替換不透明的像素。它將類似於水印功能。

來源

2010-11-18 14:11:11 Dylan

你能想到通過JavaScript的方式嗎？它適用於我的一個類中的學生，我們只是在處理客戶端代碼 - 所以雖然我可以用PHP GD來解決這個問題，但我試圖找到適用於我們正在使用的技術的解決方案。 – Susan 2010-11-18 14:37:58

蘇珊，我找不到任何不依賴於服務器處理的方式。如果您創建解決方案，請在此處發佈鏈接。 – Dylan 2010-12-02 15:27:29

可以應用到圖像風格像filter: contrast(0%) brightness(50%)得到一個人影內。不要忘記前綴。

來源

2014-02-28 04:03:41 Johann

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>

來源

2016-12-04 13:21:16

使用CSS剪影一個PNG圖像

回答

相關問題