Question

我想为一些图片添加羽毛。这是我想要最终得到的结果：

This picture

我意识到这个问题之前已经发布过了，我已经查看了使用例如box-shadow attr的选项。我对这种方法有疑问。我将这张照片放在webm之上，所以背景并不总是保持不变。这就是为什么我必须让羽毛透明，我还没有运气！这在CSS中是否可行？这是我到目前为止使用box-shadow时得到的结果：

＆＃13;

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

＆＃13;

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

＆＃13;

我知道很多人会评论我可以将阴影的颜色设置为绿色，但如前所述，我想让它变得透明，因为背景会不断变化。

提前感谢您的任何评论！

Answer 1

你可以用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

Answer 2

您可以使用：

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

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

Answer 3

我发现可以使用的是 SVG 过滤器。它确实改变了图像边缘的不透明度，因此它可以处理改变颜色的背景和非纯色的背景。它还使用图像的不透明度，因此它可以处理非矩形图像。

它适用于最新版本的 Chrome、Firefox 和 Edge，但我尚未在 IE、Safari 或 Opera 上对其进行测试，因此如果它在这些版本上起作用/不起作用，请随时发表评论。 filter 的 compatibility table 表示只要为 IE 包含 -ms- 前缀，它就应该适用于所有最新版本。

body{
    background: url('https://lorempixel.com/800/800/abstract');
    background-size: cover;
}
img {
    -ms-filter: url(#feather);
    filter: url(#feather);
}

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="feather">
        <feGaussianBlur stdDeviation="10"  result="blur"/>
        <feComponentTransfer result="alpha-adjust">
            <feFuncA type="gamma" amplitude="1.1" exponent="8" offset="-0.1"/>
        </feComponentTransfer>
        <feComposite operator="in" in="SourceGraphic" in2="alpha-adjust"/>
    </filter>
</svg>
<img src="https://lorempixel.com/300/200"/>

过滤器说明：

第一部分是模糊，其中 stdDeviation 影响模糊量，从而影响羽化强度（越接近 0 表示羽化越少）。
第二部分使用指数函数调整 alpha。没有它，羽毛会过早地切断，留下锋利的边缘，而不是褪色到完全透明。要对此进行调整，offset 应为负数，amplitude + offset 应为 1，因此图片在远离羽毛的任何地方都保持完全不透明，并且 exponent 应大于 1（我发现指数越大效果越好）。
第三部分将此模糊图像中的 alpha 应用于原始图像。 MDN 有关于如何使用 feComposite here 的大量文档，但您真正需要知道的是 in 运算符是此处适用的运算符。

请务必注意，所有使用此效果的 HTML 文件中必须存在此 SVG 过滤器，并且使用此效果的元素必须包含 filter: url(#feather)（或您决定命名的任何内容）过滤器）在样式中。

如何用css制作透明羽毛pref

3 个答案: