<p> 标签在 <div> 中始终处于背景之下

Question

所以基本上我希望我的 p 标签始终显示在我的背景图片下方。如果我将 window 变小，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;
}

Answer 2

只是把 p 标签从 div 中取出来允许 p 标签定位。

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

css:

    img-background {
    background-image: url(test.jpg);
    background-repeat: no-repeat;
    height: 10%;
    background-position: center;
}

从不与 div 重叠。

Answer 3

这是一种替代方法，它不需要 padding 或 margin 到 "make space" 的图像大小，例如，如果您想将图像大小缩放到屏幕大小

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

CSS

.img-background {
    background-image: url(test.jpg);
    background-repeat: no-repeat;
    background-size: 100%; /* or cover or contain etc. */
    display: block;
    margin:auto; /* can add optional margin for top bottom too 
                    so image doesn't "touch" anchor below it */
    width: 50px; /* or whatever you want/need */
    height:  63px; /* or whatever you want/need */

}

<p> 标签在 <div> 中始终处于背景之下

<p> tag always under background in <div>

html

css

background-image