html - <p> 标签总是在 <div> 的背景下

Question

所以基本上我希望我的 p 标签总是显示在我的背景图片下。如果我将窗口变小，p 标签不应与 background-image 重叠。

我知道在源代码中将它作为一个 img 添加到一个单独的 div 中会有很大帮助，但对此的回答会很好。

HTML:

 <div class="champ-link img-background">
    <a>
      <p>browse the selection</p>
    </a>
 </div>

CSS:

.img-background {
     background-image: url(test.jpg);
     background-repeat: no-repeat;
     background-size: 50px 63px; 
}

Answer 1

.img-background {
   background-image: url(test.jpg);
   background-repeat: no-repeat;
   background-size: 50px 63px; 
   padding-top: 63px;
}

或

p {
   margin-top: 63px;
}