Question

我正在使用Ionic2并试图应用一种风格。我有一个消息框：

我正在尝试将此图片应用于它：

因此看起来它已加入消息框。

我的问题是图像根本没有应用。

我有以下css。如您所见，此处定义了图像：background-image: url(/assets/message-you.png)。图像存在于该位置，因为如果我将其悬停在Firebug中，则图像就在那里。

我从教程中得到了这个css，我不确定&::before {是如何工作的。

任何建议都表示赞赏。

.messages-page-content {
  > scroll-content {
    padding: 0;
  }

  .messages {
    height: 100%;
    background-color: #E0DAD6;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .message-wrapper {
    margin-bottom: 9px;

    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }

  .message {
    display: inline-block;
    position: relative;
    max-width: 236px;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);

    &.message-me {
      float: right;
      background-color: #DCF8C6;

      &::before {
        right: -11px;
        background-image: url(/assets/message-me.png)
      }
    }

    &.message-you {
      float: left;
      background-color: #FFF;

      &::before {
        left: -11px;
        background-image: url(/assets/message-you.png)
      }
    }

    &.message-you::before, &.message-me::before {
      content: "";
      position: absolute;
      bottom: 3px;
      width: 12px;
      height: 19px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .message-content {
      padding: 5px 7px;
      word-wrap: break-word;

      &::after {
        content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
        display: inline;
      }
    }

    .message-timestamp {
      position: absolute;
      bottom: 2px;
      right: 17px;
      font-size: 11px;
      color: gray;
    }
  }
}

这是控制台输出：

正如您在Firebug中看到的那样，图像存在：

Answer 1

您需要将content:"";添加到::before - 元素。

编辑：

我看到你已经有了内容：＆＃34;＆＃34 ;;在你的前元素..

CSS＆amp; :: before {not working

1 个答案: