将模糊添加到fancybox而不是黑暗dim

<div class="container is-blur"> 
    <h1>Hello</h1> 
    <p>Background page content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
</div> 

<div class="overlay"> 
    <div class="fancybox"> 
     Your fancy box content 
    </div> 
</div>

CSS

.container { 
    position: relative; 
} 

.container.is-blur { 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
} 

.content { 
    font-size: 1.5rem; 
    line-height: 2rem; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: rgba(0,0,0,.5); 
    filter: blur(5px); 
} 

.fancybox { 
    width: 200px; 
    margin: 0 auto; 
    top: 200px; 
    position: relative; 
    background-color: #fff; 
    padding: 30px; 
}

对Lorem ipsum感到抱歉。

注意

CSS 过滤尚未被IE支持。结帐http://caniuse.com/#feat=css-filters

fyi：-ms-filter在IE上不起作用。

对于过滤的进一步探索，检出MDN文档 https://developer.mozilla.org/en-US/docs/Web/CSS/filter

来源

2016-06-14 12:13:37 Maneeshpal

这是一个链接唯一的答案，请添加一些代码示例。 –

不知道这一点。你的担心完全合情合理。更新我的回答 – Maneeshpal

好的，好的信息 - 我会看看这个，回来。谢谢一堆 – Stefan

没错这些都是好消息 - 虽然我已经看到了其中的一些，并试图出来我的细节。真正的问题是将模糊添加到叠加层本身 - png中带有透明度的图像。不像这里的图像 - 我们想要第二张图像上的内容（页面）在磨砂/模糊之后）。我想后面的另一DIV层需要的，但我们不知道如何实现这个..

What we want:)

What we don´t want

享受你的一天所有:)

来源

2016-06-15 07:18:26 Stefan

如果你的覆盖有一个透明PNG，它可能会模糊。我的代码示例使用css颜色透明度'rgba（0,0,0，.5）'。在视觉上，我想知道容器（页面内容）是否模糊或覆盖是否有任何区别。 – Maneeshpal

感谢您的输入Maneesphpaal。也许情况就是这样，虽然很容易尝到，但我们自然而然地做了很多不同的变化，我相信我们错过了一些相当简单的东西:)。我们希望那些熟悉这种有效性的人能够增加如何使其发挥作用 - 我不明白你的意思是不好意思说什么。我们正在尝试添加模糊或磨砂玻璃，而不是上面链接中出现的黑色覆盖层。而已。 – Stefan

将模糊添加到fancybox而不是黑暗dim

回答

相关问题