列表煎茶触摸中的模糊背景

Question

我有一个列表，其中包含我的移动应用程序的主菜单，当用户向右滑动或单击菜单图标时可见。我想要这个列表的背景，因此要模糊主菜单。

我检查了 css filter:blur 属性，它可以使用它来完成，但是您需要在包含您的内容的 div 下有一个额外的 div 并将 filter:blur 应用于它，如图所示在这个Codepen

下面是我的煎茶触摸列表代码

Ext.define('MobileApp.view.SlideList', {
   extend: 'Ext.List',
   xtype: 'slidelist',

   config: {
      cls: 'slide1',
      variableHeights: true,
      onItemDisclosure: true,
      store: 'SlideListStore',


      itemTpl: ['<div class="slideImg" style="background-image:url(resources/images/{img});"></div>',
          '{title}',
      '<div class="settingImg" id="settingImg" style="background-image:url(resources/icons/nw-icons/settings.png);"></div>'].join(''),

      listeners: {
         initialize: function (comp, eOpts) {
            comp.element.on(
               'swipe',
               function (event, node, options, eOpts)
               {
                  /*send event as a argument to get direction of swipe*/
                  this.fireEvent('swipe', event);
               },
               comp
            );
         }
      }
   }
});

我不知道在哪里放置额外的 div 并对其应用 filter:blur。任何指针都会有所帮助。

Answer 1

这就是你想要达到的目标吗https://fiddle.sencha.com/#fiddle/4tb

这里是你如何做到这一点

1. 添加一个空的 div 作为列表的 html 属性
2. 移除列表的背景

3. 添加css来模糊图像

   .setMyBackground {
   位置：固定；
   左：0;
   正确：0;
   显示：块；
   背景图片：url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
   宽度:100%;
   高度：100%；
   -webkit-filter: 模糊(5px);
   -moz-filter: 模糊(5px);
   -o-filter: 模糊(5px);
   -ms-filter: 模糊(5px);
   过滤器：模糊（5px）；
   z-index:-1;
   }

   .slide1{ 背景：无；}