请检查屏幕截图模糊背景应如何工作 的 http://prntscr.com/7sfjwd
我在shopify中使用视差主题,
http://bluerock-2.myshopify.com/pages/contact 商店pw:thuich
我想知道如何应用这种模糊效果?我尝试在-webkit-filter和opacity中操作并且它没有给出好的结果,其他人告诉我我需要一个插件但我不知道如何应用它。谢谢:D
答案 0 :(得分:1)
这应该会给你一个想法:
#container{
font: 16px/1.1 sans-serif;
overflow:auto;
background:url(http://i.stack.imgur.com/V2oB8.jpg) fixed center;
text-align:center;
}
h1{
display:inline-block;
box-sizing: border-box;
color:#fff;
position:relative;
z-index:20;
box-shadow: 0 0 0 10px #fff;
padding:10px 40px;
overflow: hidden;
margin:30px;
}
h1:after{
content: "";
position:absolute;
z-index:-1;
left:0; right:0; top:0; bottom:0;
background: red url(http://i.stack.imgur.com/V2oB8.jpg) fixed center;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}

<div id="container">
<h1>CONTACT</h1>
</div>
&#13;