html - 伪元素 background-image 不起作用

Question

根据 other SO solutions , 我已经尝试为伪元素提供明确的固定尺寸 (height: X px; width: X px;) 但即使这可行，我也想要一个适合其父元素的可缩放响应图像，因此，固定尺寸对我来说是 Not Acceptable 。如何让 background-image 显示并同时自动缩放？

HTML:

<h3>This is a title</h3>

CSS:

 h3:before{
   background-image:url('https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg'); 
   background-size: contain;
   background-repeat: no-repeat;
   display: block;
 }

Answer 1

试试这个

h3:before{
    background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    height: 110px;
    display: block;
}