javascript - 晕影蒙版效果

我正在尝试实现一种效果，即背景图像显示在边框处，内容后面的页面中心有一个白色的小插图。我现在的解决方案是有问题的跨浏览器。也许我缺少一些 css，或者我愿意接受不同的方法:www.hvactapes.com

<body>
    <div id="vignette-wrapper">
        <div id="vignette-blur"></div>
    </div>
</body>



body {
    background-image: url(/background-md.jpg);
    position: relative;
}

#vignette-wrapper {
    width: 100%;
    height: auto;
    position: absolute;
}

#vignette-blur {
    background-color: rgba(255,255,255,0.98);
    display: block;
    width: 85%;
    max-width: 1400px;
    min-height: 1024px;
    -webkit-filter: blur(43px);
    filter: blur(43px);
    margin: 200px auto 0;
}

最佳答案

您可以尝试在 wrapper:after 上使用 css3 box-shadow 来做到这一点。

这是一个解释如何创建此效果的简单教程:http://nimbupani.com/vignettes-with-css3-box-shadows.html

box-shadow 应该可以在几乎所有现代浏览器中跨浏览器工作(opera-mini 除外)。

希望对您有所帮助。祝你好运。

关于javascript - 晕影蒙版效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42956247/