使用 CSS 将软边缘应用于图像

Posted 2023-03-06

【中文标题】使用 CSS 将软边缘应用于图像

【英文标题】：Apply soft edges to image using CSS

【发布时间】：2015-06-01 15:55:46

【问题描述】：

给定一张图片，有没有办法使用 css 来柔化边缘？或者通过一些 js 库（虽然 css 会是首选）？这个想法是图像的边缘应该模糊成透明度，以便它们更好地适应背景。

示例，原图：

具有柔化边缘的图像：

在 *** 上有很多类似的问题，但是没有一个（我能找到）提供一个答案来做到这一点。大多数情况下，他们关心的是模糊整个图像，或在图像上设置半透明边框，这都不是我想要的。

【问题讨论】：

为什么不在 photoshop/gimp 中编辑图像，使其看起来像那样，然后将 img 放入 div 容器中？

因为图片是用户上传的，效果应该在运行时应用。

我只想声明我没有为这个问题设置标题。最初的问题是“使用 css 对图像应用软边缘”，因为“软边缘”是我知道这种效果的名称（这就是我用来生成示例的 MS Word 中的名称）。我想这也是其他人知道的名字，他们现在将再次难以找到以下答案。似乎很丢脸。此外，标题“Applz”中的错字是编辑器的不幸手指抽搐。 @DJDavid98：为什么你觉得有必要编辑我的问题，这似乎完全切中要害？

Feather 用于大多数高级图像编辑程序，如 Photoshop，如果我没记错的话。如果您不同意，请随时将其更改回来。另外，很抱歉错字，我现在更正了。

在这个意义上我不同意，一旦您知道关键字“feather”，确实有更多可用信息，但这只有在您知道该关键字时才有用。对于非图像编辑器，“软边缘”是一个更直观的术语——也是 MS Word 中使用的术语——我们将从这里开始搜索。

【参考方案1】：

你可以试试这样的：

JSFiddle Example

html：

<div id="image-container"><div>

CSS：

#image-container 
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
width: 300px;
height: 300px;

【讨论】：

这只会给人一种羽毛边缘的错觉。如果背景不是纯色，则会失败

【参考方案2】：

你可以试试：fiddle

<div class="shadow">
        <img src="http://via.placeholder.com/350x150/" />
</div>

还有 CSS。

shadow

    display:block;
    position:relative;


img 
    width: 100%;
    height: 100%;


.shadow:before

    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
    -webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
    box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);