Ionic 3-如何设置带有滚动内容的固定背景图像？答案

【问题标题】：Ionic 3- how to set fixed background image with scrolling content?Ionic 3-如何设置带有滚动内容的固定背景图像？
【发布时间】：2018-05-06 17:01:39
【问题描述】：

我正在开发 Ionic 聊天应用程序。我想为带有滚动聊天内容的聊天窗口设置修复背景图像。请帮忙处理css。

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

这是我的 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;
 }

【问题讨论】：

标签： css ionic-framework ionic3

【解决方案1】：

实际上 ion-item 将背景颜色设为白色，因此您的背景图像被隐藏，将 ion-item background-color 样式设置为透明

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

【讨论】：

尝试将背景颜色添加为无
试过了，还是不行，谢谢你的努力

【解决方案2】：

试试这个

.background{
   background-image: url('../assets/bg/chatbg1.jpg');
   background-size: cover;
   background-attachment: fixed; /*-- here should be fixed --*/
}
.messageLeft{
    float: left;
    display: inline;
    padding: 4px 5px;
    background-color: transparent;/*-- make background transparent--*/
    margin: 5px;
    color: black;
    border-radius: 3px;
    word-break: break-all;
   //width: 250px;
  }
 .messageRight{
    float: right;
    display: inline;
    padding: 4px 5px;
    background-color: transparent; /*-- make background transparent--*/
    margin: 5px;
    color: black;
    border-radius: 3px;
    word-break: break-all;
     //width: 250px;

}

【讨论】：