Question

我在将文本放在背景图像下方时出现问题，我确实使用了CSS，但没有运气文字没有移动到图像下方的下一行。

这是我的HTML

    <a class="bgimg">placing text below background image </a>
    .bgimg{
    background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
    background-repeat:no-repeat;
     }

我希望在图像的顶部和文本下面有背景图像。

有人可以建议我吗？

Answer 1

密钥位于顶部填充中，因此您需要：

padding-top: 20px;

此外，由于它是一个默认为内联的锚，您需要将其设置为内联块（将其设置为阻止可能会导致文本流问题）：

display: inline-block;

就是这样，请在此处查看示例：http://jsfiddle.net/2Log20b4/

Answer 2

那时，为什么不稍微分开你的元素呢？

<div class="bgimg"></div>
<p>placing text below background image </p>

<style>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
width: 65px;
height: 31px;
}
</style>

替代方法是在你的锚上使用text-align（但是你必须先设置锚点才能显示为块元素）

Answer 3

如果图片的height 未知，您可以使用CSS generated content url()值，如下所示：

.bgimg:before {
  content: url('http://placehold.it/100');
  display: block;
}
.bgimg {
  text-align: center; /* align the image to center */
  display: inline-block;
}

<a href="#" class="bgimg">
    placing text below background image
</a>

值得注意的是，IE8及更新版本支持生成的内容。

Css背景图像和文本在新的一行

3 个答案: