Question

我不知道为什么此背景图片没有显示。但是，当我使用content:url()时，它会显示出来。使用content:url()时出现问题，我无法控制图片大小。下面，我提供完整的代码作为您的参考。

组件

@Component({
      selector: 'app-reset-password',
      template: `
      <form>
      <h2 class="dialog-form-title">RESET PASSWORD</h2>
      <div class="warning-messages"><span class="warning_image">This User ID will no longer be able to log in with their 
      previous password.</span></div>
      <div class="dialog-form-footer" fxLayoutGap="20px">
        <button mat-flat-button type="submit" [mat-dialog-close]="true" style="margin:5px;background:#2BA9F8;">Confirm</button>
        <button mat-flat-button type="button" [mat-dialog-close]="false" style="margin:5px;background:#D3D3D3">Cancel</button>
      </div>  
    </form>
      `,
      styles: ['.warning-messages{background-color: #FFFEEF; color: #D9B88A; padding: 20px 10px; margin-bottom: 10px; font-weight: 400; }.warning_image:before{background-image: url("https://cdn1.iconfinder.com/data/icons/crime-and-security-3-5/48/147-128.png");}.warning_image:before{display: inline-block;vertical-align: middle;background-size: 12px auto;}']
    })

这是DEMO

Answer 1

对于伪元素，您必须定义 content 属性。您可以直接将背景图片应用于警告消息类，而无需使用之前

.warning-messages{
  background-image: url("https://cdn1.iconfinder.com/data/icons/crime-and-security-3-5/48/147-128.png");
  background-repeat: no-repeat;
}

CSS背景图片网址未显示

1 个答案: