如何使用CSS创建动态模糊效果？

Question

如何使用CSS创建动态模糊效果？

4

我可以将这个方法成功应用在背景颜色为纯色的对象上，通过应用多个box-shadow：

HTML:

<div></div>

CSS：

div{width: 50px;
    height: 50px;
    margin: 100px;
    border-radius: 25px;
    background: rgb(0,150,0);
    box-shadow: -15px 0 12px rgba(0,150,0,0.2)
              , -11px 0 10px rgba(0,150,0,0.4)
              ,  -8px 0  8px rgba(0,150,0,0.6)
              ,  -6px 0  6px rgba(0,150,0,0.8)}

这并不是理想的解决方案，因为您会从元素上下看到阴影出血，而不仅仅是向左，但它可以勉强解决问题。

但我真正想要的是它能够很好地与背景图像配合使用，例如在这个 jsFiddle中，我希望

的边缘（或至少是背景图像的边缘）的颜色被拉伸。

我该怎么做呢？我能吗？

谢谢

- Codemonkey

1个回答

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

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

- Kushtrim · Accepted Answer

您可以添加一个::before，然后复制您的元素并模糊处理。

div{
  position: relative;
  width: 50px;
        height: 50px;
        margin: 100px;
        border-radius: 25px;
        background: url(https://i.imgur.com/pDj7wo9.png);
        background-size: cover;
        background-position: left center;
}

div::before {
    background: url(https://i.imgur.com/pDj7wo9.png);
    background-size: cover;
    background-position: left center;
    position: absolute;
    width: 55px;
    height: 55px;
    overflow: hidden;
    z-index: -1;
    filter: blur(5px);
    content: "";
    border-radius: 100%;
}

<div></div>