jQuery Mobile 磨砂页眉答案

【问题标题】：jQuery Mobile frosted headerjQuery Mobile 磨砂页眉
【发布时间】：2015-06-26 05:22:38
【问题描述】：

我在 jQuery Mobile 中使用固定标题。我可以使用例如：

轻松创建透明标题

background-color: rgba(255, 255, 255, 0.8);

随着页面在页眉上下移动，可以通过页眉看到。

我想要的是通过页眉模糊页面，即“磨砂玻璃”效果。

只是放，例如：

filter:blur(5px);

进入标题，模糊所有标题，但不模糊通过标题看到的内容。我不想模糊标题中的内容。

是否有一个简单的单行，以获取 jQuery Mobile 中的磨砂玻璃标题？如果它像例如这样简单，那就太好了：

background-color: rgba(255, 255, 255, 0.8), blur(5px);

【问题讨论】：

您可以在标题下方创建另一个 div 以包含毛玻璃效果。
我想我最初的问题并不清楚。我已经对其进行了编辑，以反映 in 标题中的内容模糊不是我想要的。

标签： jquery css jquery-mobile

【解决方案1】：

Demo

css

body, html {
    margin: 0;
    padding: 0;
}
header {
    position: relative;
    height: 50px;
    overflow: hidden;
    text-align: center;
}
header:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,0,0,0.5);
    -webkit-filter: blur(5px);
    z-index: -1;
}

html

<header>this is header</header>

【讨论】：

【解决方案2】：

创建第二个 div 作为标题内容并根据需要对其进行模糊处理。

.header {
  background-color: rgba(220, 220, 220, 0.8);
  width: 100%;
  height: 80px;
}
.header-content {
  width:100%;
  height: 100%;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
  background-color: #fafafa;
}

<div class="header">
  <div class="header-content">Test test test test test test test</div>
</div>

【讨论】：