我想为一些图像添加羽毛。这是我想要最终得到的结果：
我意识到这个问题之前已经发布过，并且我已经使用例如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>
我知道你们很多人都会评论说我可以将阴影的颜色设置为绿色，但正如前面所定义的，我想让它透明，因为背景会不断变化。
预先感谢您的任何评论！
您可以使用 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();
});
}
这是一个示范 https://jsfiddle.net/adeneo/9f535hrm/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
