我正在尝试实现一种效果，即背景图像在内容后面页面中心的边框处带有白色小插图。我现在的解决方案是有问题的跨浏览器。也许我缺少一些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;
}
最佳答案
您可以尝试在包装器上使用css3 box-shadow进行此操作：之后。
这是一个简单的教程，说明如何创建此效果：http://nimbupani.com/vignettes-with-css3-box-shadows.html
box-shadow应该在几乎所有现代浏览器中都可以跨浏览器工作（opera-mini除外）。
希望这可以帮助。祝好运。
关于javascript - 小插图蒙版效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42956247/