如何使用CSS对图像的边缘进行羽化处理

Question

如何使用CSS对图像的边缘进行羽化处理

4

我有一个无序列表，其中包含3个列表项。每个列表项都有一张图片和3个包含文本的div。我想使用CSS使图像的边缘变得羽化。

我的网站（在这里）目前使用以下HTML代码实现了羽化效果，但是整个图像似乎都被羽化了，我只需要边缘处被强烈羽化，并且在离开图像中心约50像素的范围内向四周逐渐减少羽化。

HTML:

<p class="vignette"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" /></p>

CSS：

p.vignette {
  position: relative;
}

p.vignette img {
 display: block;
 width:80%;
margin-left:auto;
margin-right:auto;
 margin-top:6%;

}

p.vignette:after {
 -moz-box-shadow: inset 0 0 180px #defeec;
 -webkit-box-shadow: inset 0 0 180px #defeec;
 box-shadow: inset 0 0 180px #defeec;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}

您可以看到我正在使用一个180px的内部投影阴影，但这使整个图像略微模糊，如果我使用50px，几乎不会注意到任何变化！如何使边缘强烈，然后向中心渐变变弱？谢谢！

- Nova

现在在box-shadow上不再需要使用供应商前缀。 - JakeParis

现在应该可以工作了。它是开/关状态。 - Nova

这可能会对你有所帮助：https://dev59.com/j2w05IYBdhLWcg3w41wp - Manjunath Siddappa

2个回答

0

创建一个 div 元素，放在 vignette 中，并将其命名为 fade。但它必须放在 img 的上面。

.fade {
        height: 100%;
        width: 100%;
        position:absolute;
        background: -webkit-linear-gradient(left, 
                    rgba(0,0,0,0.65) 0%, 
                    rgba(0,0,0,0) 20%,
                    rgba(0,0,0,0) 80%,
                    rgba(0,0,0,0.65) 100%
        );
    }

<p class="vignette">
        <div class="fade"></div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg" alt="" />
    </p>

- eclipsis

谢谢快速回复！Eric，我如何将一个类应用到另一个类？我只需要在 CSS 中这样做吗？p.vignette fade{ background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.65) 100%); } - Nova

通过修改你的HTML代码：<p class vignette fade> - eclipsis

不，你需要 <p class="vignette fade">。 - JakeParis

我会对我的回答进行一些编辑，很快就会发布。 - eclipsis

我已经应用了你所做的更改，并且我认为假设css类“.fade”实际上应该是“p.vignette fade”，因为它在vignette类中，我想我已经做到了你说的。然而，这只是拉伸了我的图像，并且没有看到任何羽化效果。如果您查看上面我的演示页面的源代码，也许您会在HTML或CSS中发现问题。我感到困惑… - Nova

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JakeParis · Accepted Answer

您需要更改一些内容才能使其正常工作。首先，将<a class='divLink'>标签上的inline-block去掉。然后尝试以下操作：

.vignette {
    width: 80%;
    margin: 1em auto;
    box-shadow: 50px 50px 113px #defeec inset,-50px -50px 110px #defeec inset;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
}

然后使用以下HTML（并删除<img>标签）：

<p class="vignette" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f8/Ellen_H._Swallow_Richards_House_Boston_MA_01.jpg);"></p>

当然，您也可以将background-image规则放在css块中，但有时在内联声明背景图像更有意义，特别是如果您预计会有许多照片或类似内容。