模糊标题

Question

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

我在shopify中使用视差主题，

http://bluerock-2.myshopify.com/pages/contact 商店pw：thuich

我想知道如何应用这种模糊效果？我尝试在-webkit-filter和opacity中操作并且它没有给出好的结果，其他人告诉我我需要一个插件但我不知道如何应用它。谢谢：D

Answer 1

这应该会给你一个想法：

＆＃13;

＆＃13;

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

＆＃13;

  <div id="container">
      <h1>CONTACT</h1>
  </div>

＆＃13;

＆＃13;

＆＃13;