/* 完整的背景高斯模糊样式 - 包含模糊层和原图层 */
/* @scale: 模糊图片放大倍数, @blur: 模糊像素, @blurImgUrl: 模糊层图片地址, @bgImgUrl: 背景层图片地址（可选） */
/* 注意：调用者需要自行设置定位方式（relative/absolute/fixed） */
.bg-blur(@scale: 1.5, @blur: 10px, @blurImgUrl: '', @bgImgUrl: '') {
  overflow: hidden;
  position: relative;

  // 模糊层（底层）- 独立控制，只要传入了模糊图片就显示
  & when not (@blurImgUrl = '') {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: @blurImgUrl;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      -webkit-filter: blur(@blur);
      filter: blur(@blur);
      -webkit-transform: scale3d(@scale, @scale, 1);
      transform: scale3d(@scale, @scale, 1); /* 触发 GPU 加速，关键步骤，使用 transform:scale 会导致真机页面初次展示有黑色遮罩出现的问题 */
      will-change: transform; /* 提示浏览器优化 */
      z-index: 1;
    }
  }

  // 原图层（顶层）- 独立控制，只要传入了背景图片就显示
  & when not (@bgImgUrl = '') {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: @bgImgUrl;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 2;
    }
  }
}

.element::before {
  filter: blur(10px);
  background-color: transparent; /* 透明背景 */
}