Question

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

轻松创建透明标题

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

当页面向上移动并在标题下方时，可以通过标题看到它。

我想要的是通过标题看到的页面模糊，即＆＃34;磨砂玻璃＆＃34;效果。

只是推，例如：

filter:blur(5px);

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

是否有一个简单的单线程，在jQuery Mobile中获得磨砂玻璃头？如果它像例如那样简单，那将是很好的：

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

Answer 1

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

DBMS_OUTPUT.PUT_LINE

.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;
}

Answer 2

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>

jQuery Mobile磨砂头

2 个答案: