Question

我试图在这张图片前面摆放这张桌子而且它没有发生，我知道这张桌子不仅仅是一个例子！

HTML

<section>
  <div class="image-wrapper">
    <img src="img/animesea.png" alt="animeb-image" class="picimage">    
    <table>
      <tr>
        <td>a</td>
      </tr>
    </table>
  </div>
</section>

由于

Answer 1

我会将图像放置为像@SVK建议的背景图像。这是另一种选择。将img代码和table代码包装在不同的div中，并在两者上应用position: absolute。 jsFiddle

您还可以使用z-index和定位。 jsFiddle。它并不清楚你想要达到的目标，但根据你的要求，我会将图像应用为像@SVK这样的背景。

Answer 2

您可以使用css样式，因此将始终使用表格大小调整背景图像。

有代码：

＆＃13;

.tableBckImg
{
    background:url(http://www.placehold.it/300x300);
    background-repeat:no-repeat;
    background-size:100% 100%;
}

＆＃13;

<table cellspacing="0" cellpadding="0" border="0" class="tableBckImg">
    <tr>
      <td width="50" align="center">1</td>
      <td width="50" align="center">2</td>
      <td width="50" align="center">3</td>
    </tr>
    <tr>
      <td width="50" align="center">4</td>
      <td width="50" align="center">5</td>
      <td width="50" align="center">6</td>
    </tr>
    </table>

＆＃13;

您可以更改行数和列数，并在fiddle example

中查看背景图片如何展开或缩小

在此示例中，背景图像为300x300像素。

Answer 3

检查出来。你会有所了解。

  <!DOCTYPE>
    <html>
    <style>
.image-wrapper 
      { 
        width:650px;
        height:488px;
        background: url("http://stuffpoint.com/sea-and-beach/image/56782-sea-and-beach-anime-sea-pic.jpg") no-repeat;
        background-size:contain; 
        padding:5px; 
        margin:auto;
      }
table 
  {
    width:650px;
    height:150px;
    border:2px solid yellow;
    color:white;
    background-color:rgba(0,0,0,0.5);
    text-align:center;
    padding:2px;
  }
th  
  {
    border:1px solid yellow;
    color:white;
    font-size:20px;
  }
td
 {
    border:1px solid yellow;
    color:white;
 }
   </style>
      <body>
      <section>
          <div class="image-wrapper">
            <table>
                <th colspan='3'>Person name and age</th>
                      <tr>
                        <td>First name</td>
                        <td>Last name</td> 
                        <td>Age</td>
                      </tr>
                      <tr>
                        <td>Eve</td>
                        <td>Jackson</td> 
                        <td>54</td>
                      </tr>
                      <tr>
                          <td>John</td>
                          <td>smith</td> 
                          <td>74</td>
                      </tr>
            </table>
          </div>
     </section>
    </body>
   </html>

图像前面的HTML / CSS表

3 个答案: