你如何掌握文本背景?

时间:2013-11-24 03:43:46

标签: html css background html-table background-image

我在我的文字背景中放置背景图片时遇到了麻烦。我正在使用我的代码,但它总是最终将图像放在我的文本前面。这是代码:

 <html>
</style>
<head>
<title>Testing</title>
</head>
    <h1 style="text-align: center;">
        <img alt="" src="header.png" />
    </h1>
    <p>&nbsp;</p>
    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
        <tbody>
            <tr>
                <td style="width: 50%">
                    <h2>
                        <span style="color: #ffd700;"><span
                            style="background-color: #0000ff;">Unknown</span>
                    </h2>
                </td>
                <td>&nbsp;</td>
                <td style="width: 50%">
                    <h2>
                        <span style="color: #ffd700;"><span
                            style="background-color: #0000ff;">Unknown</span>
                    </h2>
                </td>
            </tr>
            <tr>
                <td>
                    <h4>
                        <strong>(A bunch of text I had)</strong>
                    </h4>
                    <h4>
                        <strong>(More Text)</strong>
                    </h4>
                    <h4>
                        <strong>(Text)</strong>
                    </h4>
                </td>
                <td>&nbsp;</td>
                <td>
                    <p>
                        <img alt="" src="image.png" />
                    </p>
                    <p style="margin: 0in; margin-bottom: .0001pt">
                        <strong>Person</strong>
                        <o:p></o:p>
                    </p>
                    <p style="margin: 0in 0in 0.0001pt;">
                        <strong>(More text)</strong>
                        <o:p></o:p>
                    </p>
                    <p style="margin: 0in 0in 0.0001pt;">
                        <strong>(More text)</strong>
                        <o:p></o:p>
                    </p>
                    <p style="margin: 0in 0in 0.0001pt;">
                        <strong>(More text)</strong>
                        <o:p></o:p>
                        </span>
                    </p>
                    <p style="margin: 0in; margin-bottom: .0001pt">
                        <strong><a href="www.google.com"(Moretext)></a></strong></a>
                        <o:p></o:p>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
</div>
</html>

忘记添加我的背景图片代码:

<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="background.png" style='width:100%;height:100%'/>

1 个答案:

答案 0 :(得分:0)

<div style="background: url(background.png);">

不要使用<img>代码 - 这是不必要的。

我建议你不要使用z-index,除非你确实需要,因为如果它是唯一一个可以使用定位或花车避免使用它。