伪元素背景图片不起作用

Question

与其他SO解决方案一样 ，我尝试为伪元素赋予明确的固定尺寸（ height: X px; width: X px; ），但是即使此方法可行，我仍需要适合其父元素的可缩放的响应式图像，因此固定尺寸对我来说是不可接受的。 如何显示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

尝试将这些样式添加到您的伪元素中

content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;

Answer 2

尝试这个

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;
}

Answer 3

您可以在h3本身中使用background ，并使用background-size调整大小。

堆栈片段

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

 <div class="wrapper"> <h3>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</h3> </div> 

Answer 4

我添加了以下content: ''; 并为伪元素指定height和min-width 。

 h3:before { content: ''; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMdl8cg3CDenBgBdDey8W2KUfDIfKO7ZcPk6c5KtuLn8OJBzu8'); background-size: contain; background-repeat: no-repeat; display: block; min-width: 150px; height: 40px; } 

 <h3> This is a title </h3>