如何用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

回答

相关问题