Question

我正在一个宣传网站上工作，我在广告中将广告对齐在一个有两行和一列的用户所需的列中。

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

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

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

Google Chrome示例为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/

将文字放在图像上

1 个答案: