文章/答案/技术大牛

发布

问Vignette蒙版效果
EN

Stack Overflow用户

提问于 2017-03-22 23:34:59

回答 2查看 269关注 0票数 1

我正在尝试实现一种效果，在内容后面的页面中心，背景图像显示在边框上，并带有白色小花边。我现在的解决方案是有问题的跨浏览器。也许我遗漏了一些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;
}

javascript

jquery

html

css

回答 2

Stack Overflow用户

发布于 2017-03-22 23:47:54

您可以尝试使用包装器上的css3 box-shadow :after来完成此操作。

这里有一个简单的教程，解释了如何创建这种效果：http://nimbupani.com/vignettes-with-css3-box-shadows.html

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

希望这能有所帮助。祝好运。

票数 1

Stack Overflow用户

发布于 2017-03-22 23:50:27

你可以使用一个has great browser support的radial-gradient

示例

body {
    background-image: url('http://www.beaconsinn.com/images/media.tumblr.com/tumblr_lkpvcrUmPJ1qhk2te.jpg');
    position: relative;
    min-height: 1000px;
    margin: 0;
    padding: 0;
}

body:before {
display: block;
position: absolute;
  left: 0;
  top: 0;
height: 100%;
width: 100%;
content: '';
background: radial-gradient(
  rgba(255, 255, 255, 100), 
  rgba(255, 255, 255, 100),
  rgba(255, 255, 255, 0)
);
}

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


#vignette-blur {
    width: 100%;
    height: 100%;
    background: radial-gradient(red, yellow, green);
}

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42956247

复制

相似问题

问Vignette蒙版效果
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vignette蒙版效果EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vignette蒙版效果
EN