3

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

通过使用以下 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 像素，它几乎不会被注意到！我如何使边缘变得强烈，然后向中心逐渐变弱？

谢谢！

4

2 回答 2

4

你需要改变一些东西才能让它工作。<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 块中，但有时内联声明背景图像更有意义，特别是如果您希望有许多照片或类似的照片。

于 2014-10-29T19:19:22.557 回答
0

创建一个可以进入的 divvignette并调用它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>

于 2014-10-29T18:58:02.267 回答