Question

我想在背景图片上放置一些文字。我无法将文本放到＆＃34;屏幕区域＆＃34;移动图像。

我在 .text-content 上使用了margin-top，但它正在推动整个背景图片。

目前正在开发FF29，但我希望这适用于所有现代浏览器。

这是我的JSFiddle的链接：http://jsfiddle.net/sga/sHhfy/2/。

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

.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

您必须在.text-content上使用padding-top而不是margin-top：

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

jsfiddle

HTML / CSS：背景图像上的文本叠加

1 个答案: