模糊标题

时间:2015-07-14 03:55:40

标签: javascript jquery css blur

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

我在shopify中使用视差主题,

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

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

1 个答案:

答案 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;
&#13;
&#13;