HTML / CSS：文本覆蓋在背景圖像上

Question

我正在嘗試在背景圖像上放置一些文本。 我無法將文字顯示在移動圖像的“屏幕區域”上。

我在.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 個解決方案

解決方案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