问题描述

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

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

.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>

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

标签： htmlcss

CSS

在您的 CSS for ::after 中：缺少一些 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%;

}

您已经为身体应用了背景线性渐变。要更改气泡，请为气泡类应用 ::after 并给出

位置：相对

到父类

html - CSS渐变聊天气泡

问题描述

解决方案

CSS

推荐阅读