如何用css製作一個透明的羽毛pref

我想爲某些圖像添加羽毛。這是我想結束了結果：如何用css製作一個透明的羽毛pref

This picture

我意識到這個問題之前已經發布，並且我已經看過使用例如box-shadow attr的選項。我雖然有這個方法的問題。我將在webm之上有這張照片，所以背景並不總是保持不變。這就是爲什麼我必須使羽毛透明，這是我沒有運氣了！這甚至可以在CSS中實現嗎？這是結果我收到的時候我用的box-shadow到現在爲止：

body{ 
 
    background:green; 
 
} 
 
div { 
 
    background: red; 
 
    width: 200px; 
 
    height: 142px; 
 
    position: relative; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    -webkit-box-shadow: inset 0 0 18px 20px #fff; 
 
    box-shadow: inset 0 0 18px 20px #fff; 
 
}

<html> 
 
<body> 
 
    <div></div> 
 
</body> 
 
</html>

我知道很多你只是評論，我可以設置陰影等於顏色綠色，但如前所述，我希望透明，因爲背景會不斷變化。

在此先感謝您的任何意見！

來源

2015-12-21 Rein Oterholm

只要因爲約束條件是「使用CSS」，我不認爲這是可以做到的。 –

用一些HTML和CSS剪貼蒙版可以很容易地完成。 https://css-tricks.com/clipping-masking-css/ –

沒有限制，現在更改標題 –

您可以使用此：

HTML：

<figure> 
    <figcaption></figcaption> 
    <img src="your-image.jpg" alt=""> 
</figure>

的CSS：

figure{ 
    position: relative; 
    display: inline-block; 
} 
figure figcaption{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    box-shadow: inset 0 0 18px 20px #fff; 
}

我希望它可以幫助你......

來源

2015-12-21 20:05:20

這與Rein在問題中有何不同？它看起來像是一樣，只是不同的標籤 –

你可以使用JavaScript做，這裏有一個簡單的jQuery插件，我只是用它來處理背景圖片和某些標記。

這不是一個結束，以任何方式進行測試插件，我只是做了它在幾分鐘內展示的概念，用代碼

$.fn.blurry = function(amount) { 
    amount = amount || 10; 
    return this.each(function() { 
     var els = []; 

     for (var i = amount; i--;) { 
      var el = $('<' + this.tagName + '/>'), 
       a = amount - i; 

      el.css('cssText', this.style.cssText); 
      el.css({ 
       position : 'absolute', 
       top  : $(this).position().top + a, 
       left  : $(this).position().left + a, 
       height : $(this).height() - (a*2), 
       width : $(this).width() - (a*2), 
       opacity : 1/i, 
       backgroundPosition : '-' + a + 'px -' + a +'px' 
      }); 
      els.push(el); 
     } 

     $(this).parent().append(els).end().remove(); 
    }); 
}

了幾行，這裏是一個demonstration

來源

2015-12-21 21:04:48 adeneo

如何用css製作一個透明的羽毛pref

回答

相關問題