Question

我正在使用phonegap和jquery mobile开发移动应用。我想知道，我怎么能模糊标题的背景，这样当我滚动主体时，标题的背景模糊样式会根据滚动到顶部的新主体元素而变化。对于最好的考试，你可以看到ios7控制器做到了！请注意，我知道下面的过滤器。但是当我把它作为我的标题的背景时，它只是模糊标题的内容，如标题，它没有到背景！我该怎么做？

-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px); 
-o-filter: blur(10px);
filter: blur(10px);

Answer 1

我只是找到了自己问题的答案。你必须建立两个元素，其中一个是真实背景，其中一个是你的模糊背景，第二个是第一个被复制，但它有模糊过滤器。在jquery中，对于滚动，只要滚动真实元素，就必须滚动模糊元素。并且通过小样式将模糊元素设置为标题背景。 Have a look at this code pen to see the full example.我只是放了一个夏季代码。

main.html：

<div class="phone">
<div class="screen">
    <header>
    </header>
    <div class="content-wrapper">
        <div class="content">
            <!-- content goes here -->
        </div>
    </div>
</div>

main.css：

.screen {
    width:319px;
    height:568px;
    overflow:hidden;
}

header {
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:44px;
    overflow:hidden;
    background:#f8f8f8;
    z-index:2;
    box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
}


.content-blurred {
    margin-top:44px;
    padding:0 1rem;
    position:absolute;
    top:0;
    left:0;
    right:0;
    -webkit-filter:blur(10px);
    filter:url(#blur-effect);
    opacity:.35;
   z-index: 1;
}

.content-blurred .content {
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  backface-visibility:hidden;
}

.content-wrapper {
    position:relative;
    padding:0 1rem;
    z-index:1;
    height:100%;
    overflow:auto;
  -webkit-backface-visibility:hidden;
}

.content-wrapper .content {
    margin-top:44px;
}

main.js：

var content = document.querySelector('.content');
var duplicate = content.cloneNode(true);
var contentBlurred = document.createElement('div');
contentBlurred.className = 'content-blurred';
contentBlurred.appendChild(duplicate);

var header = document.querySelector('header');
header.appendChild(contentBlurred);

var contentWrapper = document.querySelector('.content-wrapper'),
translation;

contentWrapper.addEventListener('scroll',function(){
  translation = 'translate3d(0,' + (-this.scrollTop + 'px') + ',0)';
  duplicate.style['-webkit-transform'] = translation;
  duplicate.style['-moz-transform'] = translation;
  duplicate.style['transform'] = translation;

  console.log(duplicate);
});

// offset to demo blurring
contentWrapper.scrollTop = 140;

如何模糊phonegap中标题的背景？

1 个答案: