HTML / CSS：文本覆盖在背景图像上

Question

I am trying to position some text on a background image. 我正在尝试在背景图像上放置一些文本。 I am having trouble bringing the text down on to the "screen area" of the mobile image. 我无法将文字显示在移动图像的“屏幕区域”上。

I used margin-top on .text-content , but it is pushing down the complete background image. 我在.text-content上使用margin-top，但是它压低了整个背景图像。

Currently working on FF29, but I would like this to work on all modern browsers. 目前在FF29上工作，但是我希望它在所有现代浏览器上都能工作。

Here is the link to my JSFiddle: http://jsfiddle.net/sga/sHhfy/2/ . 这是我的JSFiddle的链接： http : //jsfiddle.net/sga/sHhfy/2/ 。

HTML HTML

<body>
    <div class="mainPage">
        <div class="main-content">
            <div class="text-content">
                <div class="text-body">Hello World!</div>
                <div class="text-body">Hello World!</div>
                <div class="text-body">Hello World!</div>
            </div>
        </div>
    </div>
</body>

CSS CSS

.mainPage {
    background: red;
    width: 100%;
    float: left;
}

.main-content {
    background: yellow url('http://s15.postimg.org/mrlg0biuz/mobile.png')
        no-repeat center;
    width: 600px;
    height: 450px;
    margin: 0 auto;
}

.text-content {
    text-align: center;
    color:#fff;
}

Answer 1

You must use padding-top on .text-content instead of margin-top: 您必须在.text-content上使用padding-top而不是margin-top：

.text-content {
    text-align: center;
    color:#fff;
    padding-top: 50px;
}

jsfiddle 的jsfiddle

HTML / CSS：文本覆盖在背景图像上

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-06-08 04:56:18

HTML / CSS：文本覆盖在背景图像上

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-06-08 04:56:18

解决方案1
2 已采纳 2014-06-08 04:56:18