css - 在 中将文本放在图像上

Question

我在一个促销网站上工作，在该网站上，我将广告排列在一个表格中，表格中有两行和任意多的列，用户可以根据需要排列。

通过分配min-width: 200px到 <td>元素我实现了如果我添加更多 <td>，我的表格将增加其宽度元素。然后将表放入 <div class="index"> 中这使我能够使用滚动条左右滚动我的表格。为了测试这一点，我添加了很多 <td>表中的元素。

所以现在我希望我的单元格包含文本(居中对齐的 x 和 y)和图像(跨单元格不同)占据所有单元格空间并降低悬停时的不透明度 - 以便可以看到下面的文本。

我必须定位我的 table.index td - 否则图像会溢出我的圆形单元格 Angular 。我试图将我的文本放在某种容器中并将其放在图像下方......关于如何实现这一点的任何建议？

谷歌浏览器示例是 here .

---

CSS:

table.index{
    table-layout: fixed;
    border-spacing: 20px;
    font-size: 12px;
    color: white;
}
table.index td {
    height: 200px;        /*image height is calculated from this*/
    width: 200px;         /*image width is calculated from this*/
    min-width: 200px;     /*forces table to spread it's width*/
    position: relative;   /*in order for overflow in next line to work*/
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #1A1A1A;
    background-color: rgba(0, 0, 0, 0.90);
    box-shadow: 0px 0px 8px #000000;
    -moz-box-shadow: 0px 0px 8px #000000;
    -webkit-box-shadow: 0px 0px 8px #000000;
    vertical-align: top;
    }
table.index td img {
    height: 100%;
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
table.index td:hover{
    box-shadow: 0px 0px 15px #000000;
    -moz-box-shadow: 0px 0px 15px #000000;
    -webkit-box-shadow: 0px 0px 15px #000000;
}
table.index td img:hover {
    -webkit-filter: blur(5px) opacity(50%);
}
div.index {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-y: hidden;
}

HTML:

<div class="index">
<table class="index">
<tr>
    <td>
        <img src="../slike/index/2015-12-06-comptech.png"/>
        Obiskal sem sejem Comptech in si ogledal 3D očala Oculus rift.
    </td>
    <td>
        <img src="../slike/index/2015-11-26-objava-avtomatika.png"/>
        Moj članek iz mednarodne konference Utrip prihodnosti je bil objavljen v reviji Avtomatika 138/2015.
    </td> 
    <td> 
        ...
    </td>
    <td>
        ...
    </td>
    <td>
        ...
    </td>
    <td>
        ...
    </td>
    <td>
        ...
    </td>
</tr>
<tr>
    <td>
        ...
    </td>
    <td>
        ...
    </td> 
    <td>
        ...
    </td>
    <td>
        ...
    </td>
    <td>
        ...
    </td>
    <td>
        ...
    </td>
    <td>
        ...
    </td>
</tr>
</table>
</div>

Answer 1

table.index td {
  ...

  vertical-align: middle; /* changed from top */

  text-align: center; /* added */

}
table.index td img {

  ...
  height: auto; /* changed from 100% */
  /* add: */
  position: absolute;
  top: 0;
  left: 0;
}

我想这就是你想要的？演示:http://jsfiddle.net/tLetsj19/2/