backdrop-filter与下拉毛玻璃效果实例页面

展示

代码

• HTML：

  <button id="button" class="ui-button" data-type="primary">点击我出现下拉列表</button>
  <p><img src="1.jpg" width="256"></p>

• CSS：

  .ui-droplist-x {
      background: hsla(0, 0%, 100%, .75);
      -webkit-backdrop-filter: blur(5px); 
      backdrop-filter: blur(5px); 
  }
  a.ui-droplist-li:hover {
      background: hsla(0, 0%, 100%, .3);
  }