Question

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

Answer 1

您可以尝试在包装器上使用css3 box-shadow执行此操作：after。

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

box-shadow应该可以在几乎所有现代浏览器中使用跨浏览器（除了opera-mini）。

希望这会有所帮助。祝你好运。

Answer 2

您可以使用radial-gradient

has great browser support

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

暗影面具效果

2 个答案:

实施例