html - 如何在背景图片上方设置文字

Question

我对元素背景图像有疑问。

我有以下内容：

<div class="element" style="background-image: url(http://1.png); border: thin solid rgb(31, 101, 155); background-size: 133px 106px; background-repeat: no-repeat;">
    <table class="title_table" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>Element Title</td>
            </tr>
        </tbody>
    </table>
</div>

结构无法更改，我希望Element Title在背景图像上方显示“” (1.png)。目前，背景图片覆盖了“ Element Title”。

有没有办法做到这一点？非常感谢！

Answer 1

<table class="title_table" cellpadding="0" cellspacing="0" style="background-image: url(http://1.png);">

并使用1.png's width& heightfor table。

Answer 2

您可以重新定位背景。

将此添加到您的样式中：

background-position: 0px 1.1em;

它将背景向下推到行高的大小，并且稍微多一点，这样标题就不会碰到背景的顶部。

Answer 3

我用不同的 url 重用你的代码：

<div class="element" style="background-image: url(http://profile.ak.fbcdn.net/hprofile-ak-ash4/273203_100004092323558_2118346675_n.jpg); border: thin solid rgb(31, 101, 155); background-size: 133px 106px; background-repeat: no-repeat;">
<table class="title_table" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>Element Title</td>
        </tr>
    </tbody>
</table>

它仍然可以正常工作，请检查您的网址。