Ionic 3-如何用滚动内容设置固定的背景图像？

Question

我正在使用Ionic聊天应用。我想为滚动聊天内容设置聊天窗口的修复背景图像。请帮忙解决问题。

当我发送任何文字时，背景图片会被隐藏。

这是我的HTML代码

<ion-content scrollDownOnLoad="true" id="chat-window" class="background" no-padding>

    <ion-list>
        <ion-item text-wrap class="message" *ngFor="let chat of chats" no-lines>
        <div [class]="chat.sent_by == loggedInUserKey ? 'messageRight' : 'messageLeft'">
        <p class="text">{{chat.message}}</p>
        <p [class]="chat.sent_by == loggedInUserKey ? 'datetimeRight' : 'datetimeLeft'">
          <span *ngIf='chat.display_date'>{{chat.date}}</span>
          <span>{{chat.time}}</span>
          <span *ngIf='chat.seen' [class]="chat.sent_by == loggedInUserKey ? 'displayseen' : 'hideseen'">seen</span>
        </p>
        </div>
      </ion-item>
  </ion-list>

  </ion-content>

这是我的css代码

.background{
    background-image: url('../assets/bg/chatbg1.jpg');
    background-size: cover;
    background-attachment: scroll;
 }

 .messageLeft{
     float: left;
     display: inline;
     padding: 4px 5px;
     background-color: rgba(160, 158, 158, 0.562);
     margin: 5px;
     color: black;
     border-radius: 3px;
     word-break: break-all;
     //width: 250px;
 }

 .messageRight{
      float: right;
      display: inline;
      padding: 4px 5px;
      background-color: rgba(57, 113, 218, 0.795);
      margin: 5px;
      color: black;
      border-radius: 3px;
      word-break: break-all;
      //width: 250px;
 }

Answer 1

试试这个

Story

}

Answer 2

实际上，离子项将背景颜色设为白色，因此您的背景图像隐藏，将离子项背景颜色样式视为透明

<ion-item style="background-color:transparent" text-wrap class="message" *ngFor="let chat of chats" no-lines >