DIV元素渐变模糊效果不符合预期的问题排查

你的代码存在两个核心问题导致效果异常：

1. mask渐变方向错误：当前mask: linear-gradient(transparent, black 75%)是默认的从上到下渐变，意味着顶部区域模糊效果被完全遮罩，底部75%区域显示模糊，和你需要的"从下到上延伸"方向完全相反。
2. 模糊层与内部元素耦合：直接在包含按钮的容器上同时应用backdrop-filter和mask，容易引发渲染层面的色彩异常，还会导致按钮显示受遮罩影响。

修正后的代码方案 #

改用伪元素单独承载模糊和遮罩效果，分离模糊层与内部按钮，同时调整mask方向匹配需求：

CSS代码

.gradient-blur {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 用伪元素单独实现渐变模糊层 */
.gradient-blur::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  /* 从下到上的遮罩渐变：底部保留模糊，向上逐渐透明 */
  mask: linear-gradient(to top, black, transparent 75%);
  z-index: -1; /* 让模糊层处于按钮下方，不遮挡按钮 */
}

.showMoreButton {
  /* 固定按钮在底部，可根据需求调整位置 */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

HTML代码（保持不变）

<div class="gradient-blur">
  <span class="showMoreButton" (click)="expandMessage()">
        Mehr anzeigen
    </span>
</div>

额外优化提示 #

如果仍存在轻微色彩异常，可尝试给伪元素添加半透明背景色（如background: rgba(255,255,255,0.1)），优化复杂背景下的渲染效果。

内容的提问来源于stack exchange，提问作者stax