我不明白为什么这张背景图片没有出现。但是当我使用 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
最佳答案
对于伪元素,您必须定义content 属性。您可以直接将背景图像应用于warning-messages 类,而不是使用before .
.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 背景图片网址未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58538103/