Question

我在将表隐藏在图片下方时遇到问题。请访问以下链接。

有没有办法隐藏图片背后的表格？就像微软词（文本前面）中的文本包装一样，其中正面显示图片，而背面（隐藏）是表格。顺便说一句。给出更多的想法。我想把图片隐藏在图片背后，因为我的图片有一个悬停动画，当你将它悬停在它上面时，图片会移开，从而显示表格（这是我的概念）

enter image description here

我的HTML：
http://prntscr.com/2dkork
和
http://prntscr.com/2dkotb

    .sidepan img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -2000px;
}

Answer 1

是的，你可以。

与表格相比，在图像上使用更高的z-index。为了更好地控制，请将表格包裹在div中以避免在案例表内容溢出时出血。为图像和表格提供相互匹配的大小。使用绝对定位将它们整齐地放在彼此之上。

请看这个小提琴： http://jsfiddle.net/cY3bu/1/

div {
    width: 128px;
    height: 128px;
    border: 1px solid red;
    overflow: hidden;
    position: absolute;
    top: 1px; left: 1px;
    z-index: 1;
}
img {
    position: absolute;
    top: 1px; left: 1px;
    z-index: 2;  
    -webkit-transition: left 2s;
}

Answer 2

<div id="div1">
  <div id="div2"></div>
     <table>
        <tr>stuff</tr>
           <td>stuff</td>
     </table>
</div>

让我们说你有上面的HTML。

然后你可以为div2做这个css

#div2 {
   position: absolute;
   height: 100%;
   width: 100%;
   background: url("/myimage.jpg");
}

#div1:hover #div2 {
   height: 0px;
   width: 0px;
}

Answer 3

试试这个

<table>
    <td class="td">
        <span>Hello...<span>
    </td>
<table>

<style>
.td{
      background-image: url('../somepath.png');
      height: 100px;
      width: 100px;
}
.td span{
    display:none;
}
.td:hover
{
    background: none;
}
.td:hover span{
      display:block;
}
</style>

Answer 4

试试这个简单： -

table {z-index: 0;}

img {z-index: 1;}

Answer 5

您可以轻松使用此功能： style.css：

<style type="text/css">
.myTableBg { width:180px;
background:#dedede url(/pix/web_graphics/free_website_graphics/background_patterns/101Emboss8.gif) repeat;
border-collapse:collapse; 
}
.myTableBg td, .myTableBg th { border:2px solid white;padding:5px; }
</style>
<!-- Place the above styles between the document's <head></head> tags -->
<table class="myTableBg">
<tr>
<th>Table header</th><th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
<tr>
<td>Table cell 5</td><td>Table cell 6</td>
</tr>
</table>

图像可以用html覆盖表格吗？

5 个答案: