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

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为图像尺寸“腾出空间”，例如，如果您想将图像尺寸缩放到屏幕尺寸

<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>标记始终位于</p> <div>中的背景下

3 个答案: