html - CSS 渐变聊天气泡

Question

我想创建一个消息区域，其中的聊天气泡会随着用户滚动而改变颜色渐变。我的代码应该可以工作，但我不知道我错过了什么

我对 wrapper 或气泡应用了混合混合模式，但我在屏幕上看到的内容似乎是灰色的。

.sent-bubble {
  margin-right: 15px;
  margin-bottom: 10px;
  border-radius: 0 10px 0 10px;
  border: 1px solid;
  padding: 5px;
  padding-left: 10px;
  margin-left: 300px;
  word-wrap: break-word;
  max-width: 250px;
  /*text-align: center;*/
  background: black;
  color: white;
}

.received-bubble {
  margin-left: 15px;
  margin-bottom: 10px;
  border-radius: 10px 0 10px 0;
  border: 1px solid;
  padding: 5px;
  padding-left: 10px;
  word-wrap: break-word;
  margin-right: 200px;
  max-width: 250px;
  /*text-align: center;*/
  background: black;
  color: white;
}

.message-display-center:after {
  content: '';
  background: linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255)100%);
  mix-blend-mode: screen;
}

.message-display-center {
  max-height: 350px;
  text-align: justify;
  max-height: 320px;
  overflow-x: auto;
  overflow-x: hidden;
}

<div class="message-display-center">
  <div class="sent-bubble">
    Hi There Adam!
  </div>

  <div class="received-bubble">
    Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate ! Ahoy mate !
  </div>
</div>

预期结果应显示随着用户滚动而改变梯度的气泡。如果可以消除我代码中的变灰效果

Answer 1

CSS

在::after 的 CSS 中:缺少一些 imp 属性，例如

.message-display-center::after {

content: '';
background: linear-gradient(rgb(255, 143,178) 0%, rgb(167,151, 255) 50%, rgb(0,229, 255)100%);
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

您已经为 body 应用了背景线性渐变。要更改 bubble apply::after 为 buble 类并给出

position:relative

父类