实现可滚动渐变遮罩的聊天气泡效果

要实现白色容器中聊天气泡透出下方渐变背景、滚动时气泡颜色随背景变化的效果，核心是让气泡继承根元素的渐变背景并保持背景定位同步，同时容器其他区域保持白色。以下是修改后的完整代码：

完整代码 #

.root {
  background: linear-gradient(red, yellow);
  width: 100vw;
  min-height: 100vh; /* 确保内容不足时背景仍覆盖全屏 */
}

.container {
  width: 100%;
  min-height: 100vh;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* 允许容器内部滚动 */
}

.chatBubble {
  background: inherit; /* 继承根元素的渐变背景 */
  background-attachment: fixed; /* 固定背景定位，滚动时与根背景同步 */
  border-radius: 12px;
  min-width: 150px; /* 补充单位，确保样式生效 */
  padding: 12px 16px;
  margin-bottom: 16px;
  color: white; /* 文字设为白色，提升渐变背景上的可读性 */
}

<div class="root">
  <div class="container">
    <div class="chatBubble">This is a chat bubble</div>
    <div class="chatBubble">This is another chat bubble</div>
    <!-- 可添加更多气泡测试滚动效果 -->
    <div class="chatBubble">Test bubble 1</div>
    <div class="chatBubble">Test bubble 2</div>
    <div class="chatBubble">Test bubble 3</div>
    <div class="chatBubble">Test bubble 4</div>
    <div class="chatBubble">Test bubble 5</div>
    <div class="chatBubble">Test bubble 6</div>
    <div class="chatBubble">Test bubble 7</div>
    <div class="chatBubble">Test bubble 8</div>
  </div>
</div>

关键修改说明 #

• 根元素(.root)：将background-color改为background（渐变属于背景图片，不是纯色），设置min-height: 100vh避免内容不足时背景截断。
• 容器(.container)：添加overflow-y: auto允许内部滚动，增加padding让气泡与容器边缘有间距，box-sizing: border-box确保padding不影响容器宽度。
• 聊天气泡(.chatBubble)：
  • 用background: inherit继承根元素的渐变背景
  • background-attachment: fixed是核心：让气泡的背景定位与视口固定，滚动容器时，气泡显示的渐变区域会随位置变化，模拟“透出下方背景”的效果
  • 补充min-width的单位（原代码缺失单位），调整圆角和内边距让气泡样式更贴合实际，添加文字颜色确保可读性

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