让我的文字翻看背景图片

Question

我有这段代码：

<div style="background-image: url('images/middle.png'); height: 390px; width: 900px; margin-top:190px; color:#000000;">
</div>

产生这个：

但是当我把文字放在div中时，无论我用多少边距或任何东西都可以做到这一点：

但我希望文字在白色图片上。

有什么想法吗？

Answer 1

您需要padding而不是margin。

Answer 2

margin对此用途padding没有用处。我尝试了以下内容并且有效！

<div style="background-image: url(&quot;http://i.stack.imgur.com/uisvJ.png&quot;); height: 390px; width: 900px; color: rgb(0, 0, 0); margin-top: 0px; padding-left: 35px; padding-top: 25px;">
my text appears here and on top of the image
</div>

Answer 3

<div style="background-image: url('images/middle.png'); height: 390px; width: 900px; margin-top:190px; color:#000000; >
   <div style="text-align:center;padding-top:XXXXXXpx">Hello there</div>
</div>

将padding-top：XXXXXXpx设置为您需要的内容;

第二个解决方案是将内部div样式设置为margin： top auto;和宽度：100px（如果它足够用于文本，可以更少或更多）以像素为单位更改顶部您需要多少文本远离外部div

另外，下次请在说明中添加更多内容，例如该文字的显示位置：）