html - 如何在使用位置 :relative 时增加图像的宽度

Question

代码如下:

<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
    <tr>
        <td>
            <div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
        </td>
    </tr>
</tbody>
</table>

现在，我需要增加图像的宽度或需要向左缩进图像。

我该怎么做？

我试过直接给出宽度..但它不起作用...

任何意见或建议将不胜感激..

Answer 1

您正在使用图像作为父 div 的背景。如果你只想改变图像的大小，你应该使用 img 标签。类似于下面的示例

    <table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
    <tr>
        <td>
            <div >
                <img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&amp;d=identicon&amp;r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
        </td>
    </tr>
</tbody>
</table>​​​​​​​​​​​​​​​