Html CSS梯度聊天泡泡
我想创建一个消息区域，聊天泡泡会随着用户滚动而改变颜色梯度。我的代码应该有用，但我不知道我遗漏了什么 我将混合混合模式应用于包装或气泡，但我在屏幕上看到的内容似乎变灰了 .发送气泡{ 右边距：15px； 边缘底部：10px； 边界半径：0 10px 0 10px； 边框：1px实心； 填充物：5px； 左侧填充：10px； 左边距：300px； 单词包装：打断单词； 最大宽度：250px； /*文本对齐：居中*/ 背景：黑色； 颜色：白色； } .收到的气泡{ 左边距：15px； 边缘底部：10px； 边界半径：10px 0 10px 0； 边框：1px实心； 填充物：5px； 左侧填充：10px； 单词包装：打断单词； 右边距：200px； 最大宽度：250px； /*文本对齐：居中*/ 背景：黑色； 颜色：白色； } .信息显示中心：之后{ 内容：； 背景：线性梯度RGB2551431780%，RGB16715125550%，RGB0229255100%； 混合模式：屏幕； } .信息显示中心{ 最大高度：350px； 文本对齐：对齐； 最大高度：320px； 溢出-x：自动； 溢出x：隐藏； } 你好，亚当！ 喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！喂，伙计！ CSS 在CSS for:：after:中缺少一些imp属性，如 .信息显示中心：：之后{Html CSS梯度聊天泡泡,html,css,Html,Css,我想创建一个消息区域，聊天泡泡会随着用户滚动而改变颜色梯度。我的代码应该有用，但我不知道我遗漏了什么 我将混合混合模式应用于包装或气泡，但我在屏幕上看到的内容似乎变灰了 .发送气泡{ 右边距：15px； 边缘底部：10px； 边界半径：0 10px 0 10px； 边框：1px实心； 填充物：5px； 左侧填充：10px； 左边距：300px； 单词包装：打断单词； 最大宽度：250px； /*文本对齐：居中*/ 背景：黑色； 颜色：白色； } .收到的气泡{ 左边距：15px； 边缘底部：1
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%;
.message-display-center{
position:relative;
}
.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;
bottom: 0;
left: 0;
right: 0;
}