标题模糊

Question

请查看屏幕截图如何模糊背景应该工作， http://prntscr.com/7sfjwd

我在shopify中使用视差主题，

http://bluerock - 2. myshopify.com/pages/contact存储pw: thuch

我想知道如何应用这个模糊效果?我试着操纵在webkit过滤器和不透明度，它没有给一个好的结果，其他人告诉我，我需要一个插件，但我不知道如何应用它。D

Answer 1

这应该给你一个想法:

#container{
  font: 16px/1.1 sans-serif;
  overflow:auto;
  background:url(https://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(https://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>