如何在我的 TD 中居中我的背景图像？

Posted 2023-03-05

【中文标题】如何在我的 TD 中居中我的背景图像？

【英文标题】：How do I center my background image within my TD?

【发布时间】：2014-07-11 13:05:38

【问题描述】：

这是我目前所拥有的。我创建了一个样式表，但我也无法通过它直接显示。

<td  background="images/form2.png" background-size="40%" repeat="no-repeat no-repeat" attachment="fixed" alignment="center" >
    <div class="callform">CALL NOW!<br>
        1-877-670-9168<BR>or<BR>Let Us Call You
    </div>
    <div class="form2">Simply fill out the form below and one of our experts will call you.</div>
 </td>  
  <table>
      <tr>
         <td><div class="form">First name:</div></td>
         <td><input type="text" size="50%" name="firstname"></td></tr>
      <tr>
         <td>Last name: </td>
         <td><input type="text" size="50%" name="firstname"></td></tr>     
      <tr>
         <td>Phone: </td>
         <td><input type="text" size="50%" name="firstname"></td></tr>
      <tr>
         <td>Zip Code:</td>
         <td><input type="text" size="50%" name="firstname"></td></tr>
  </table>
  <div class="submit"><input type="submit" value="Submit"><br>

【问题讨论】：

请格式化您的代码并将内联样式放入样式表中，然后尝试使用它编辑您的帖子

是的，我不知道我在做什么，请帮忙！

Click here before you post your next question.

我不知道我已经在 SO 中分享了多少次这个链接，但是你去 - Why Use CSS

请同时发布您的 css

【参考方案1】：

一种方法是使用 CSS 您可以在以下位置找到更多信息：

http://www.w3schools.com/css/css_positioning.asp

首先代码很糟糕... 我建议你目前不要在td 中使用div。

JSFiddle：http://jsfiddle.net/gxQTs/3/ 注意html代码还是不合适！！

HTML：

    <div class="main">
    <img src="http://www.brendabaran.com/wp-content/uploads/2013/01/Contact_Us.jpg">
        <div class="info">
        CALL NOW!
        1-877-670-9168<BR>or<BR>
        Let Us Call You
        </div>
Simply fill out the form below and<BR>one of our experts will call you.
  <div class="form">
     <form>
First name: <input type="text" size="50%" name="firstname"><br>
Last name: <input type="text" size="50%" name="firstname"><br>
Phone: <input type="text" size="50%" name="firstname"><br>
Zip Code: <input type="text" size="50%" name="firstname"><br>
        <div class="submit" style="text-align:center;"> 
           <input type="submit" value="Submit"> 
        </div>
    </form>
  </div>
</div>

CSS：

img

resize: both;
width: 250px;
position: absolute;
left: 85px;
top: 0px;
z-index: -1;

如您所见，您可以通过“left”属性移动图像，z-index:-1 将图像设置为与表单重叠。