如何使用 CSS 羽化图像的边缘

Question

我有一个包含 3 个列表项的无序列表。每个列表项都有一个图像和 3 个包含文本的 div。我希望仅使用 CSS 对图像的边缘进行羽化处理。

我的网站found here 当前通过使用以下 html 的图像具有羽化效果。然而，它似乎使整个图像羽化，相反，我只需要非常边缘是强大的羽化，然后随着它的跨越而变得不那么羽化。 50px 向图像四面的中心。

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

您可以看到我使用了 180 像素的嵌入框阴影，但这会使整个图像略微羽化，如果我使用 50 像素，则几乎看不到！如何使边缘变得强烈，然后向中心逐渐变弱？

谢谢！

Answer 1

你需要改变一些东西才能让它工作。首先，从<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 块中，但有时将背景图片声明为内联会更有意义，尤其是当您希望有许多照片或类似内容时。

Answer 2

创建一个将进入vignette 的div，并将其命名为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>