请使用scss写一个util，用于方便创建毛玻璃特效的背景图片，支持文字在图片上显示，不被遮挡

下面是一个使用 SCSS 编写的 util，用于创建毛玻璃特效的背景图片，并确保文字不被遮挡。该 util 使用 ::before 伪元素来创建毛玻璃效果，同时在伪元素上添加文字，以确保文字显示在图片上方。

@mixin glassBackground($imageUrl, $textColor: #fff, $blurAmount: 10px) {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url($imageUrl);
    background-size: cover;
    filter: blur($blurAmount);
  }

  > * {
    position: relative;
    z-index: 1;
    color: $textColor;
  }
}

使用方法：

.container {
  width: 400px;
  height: 200px;
  @include glassBackground('path/to/your/image.jpg', $textColor: #fff, $blurAmount: 10px);

  // 其他样式...
  
  .content {
    padding: 20px;
  }
}

在这个例子中，.container 类应用了 glassBackground mixin，通过传递背景图片的路径、文字颜色和模糊程度等参数，创建了一个带有毛玻璃特效的背景。.content 类中的内容会显示在毛玻璃效果之上，确保文字不被遮挡。

在SCSS中，创建一个毛玻璃特效背景并确保文字不被遮挡通常涉及到使用CSS滤镜（如模糊效果）和布局技巧。以下是一个简化的SCSS实用工具函数和混合宏示例，用于生成带有毛玻璃背景的容器，并确保文字内容始终保持可读：

// 定义毛玻璃效果的混合宏
@mixin glass-morph($blur: 5px) {
  background-color: rgba(255, 255, 255, 0.8); // 设置一个半透明白色作为底层颜色以增强对比度
  backdrop-filter: blur($blur); // 使用backdrop-filter属性实现毛玻璃效果

  // 确保内容区域的文字不会被背景模糊效果遮挡
  & > * {
    position: relative;
    z-index: 1; // 设置文字或内容元素的层级高于背景模糊效果
  }
}

// 使用混合宏创建类
.glass-container {
  @include glass-morph(10px); // 调用混合宏并设置模糊程度为10像素
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333; // 文字颜色
  padding: 2rem;
  text-align: center;
  
  // 图片作为背景，可以使用伪元素或其他方式插入
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(your-background-image-url);
    background-size: cover;
    opacity: 0.6; // 可调整图片透明度以适应毛玻璃效果
    z-index: -1; // 图片置于文字下方
  }
}

请将 your-background-image-url 替换为实际的背景图片URL。这个示例中，.glass-container 类会应用毛玻璃效果，并且其内的任何文本内容都会保持清晰可见，不受背景模糊的影响。同时，通过:before 伪元素来设定背景图片，确保它位于毛玻璃背景之下。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/17964405.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！