jQuery Mobile 磨砂页眉

Question

我在 jQuery Mobile 中使用固定 header 。我可以使用例如轻松地创建透明 header :

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

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

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

只是放，例如:

filter:blur(5px);

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

在 jQuery Mobile 中是否有简单的一行代码来获得磨砂玻璃标题？如果它像例如这样简单，那就太好了:

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

Answer 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>