偽元素背景圖片不起作用

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>