CSS

Question

我想创建一个消息区域，当用户滚动时，聊天气泡会改变颜色梯度。我拥有的代码应该可以运行，但是我不知道自己缺少什么

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

.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

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

.message-display-center ::之后{

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%;

}

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

position：relative

到家长班

Answer 2

将beckground-color设置为pseudo选择器时，需要设置静态height和width。

但是在我们的情况下，您需要全屏background-color，所以我使用position:fixed;和top:0; bottom:0; left:0; right:0;

但如果仅需要<div class="message-display-cente"> div的高度，则必须在position:absolute中position:fixed;的位置使用.message-display-cente::after并将potion:relative设置为父div在这里.message-display-cente，如下所示。

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

     }

.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;
     position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

 }

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

CSS渐变聊天气泡

2 个答案:

CSS