Question

我有一个包含3个列表项的无序列表。每个列表项都有一个图像，以及3个包含文本的div。我希望通过仅使用CSS来使图像的边缘成为羽毛。

我的网站found here当前通过对图像使用以下html来产生羽毛效果。然而，它似乎使整个图像羽化，而我只需要非常EDGES强羽毛，然后变得不那么羽毛，因为它跨越约。在图像的各个方向朝向中心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: "";
}

你可以看到我正在使用180px的嵌入式阴影，但是这会使整个图像略微变薄，如果我使用50px，它几乎不会引人注意！如何使边缘变得强烈，然后逐渐向中心逐渐消失？

谢谢！

Answer 1

你需要改变一些东西才能让它发挥作用。首先，从<a class='divLink'>标记中取出内联块。然后尝试以下方法：

.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块中，但有时声明内联背景图像更有意义，特别是如果您希望有多张照片或类似照片。

请参阅其中的this example。

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%
    );
}

HTML：

<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>

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

2 个答案: