图片可以覆盖html中的表格吗？答案

【问题标题】：Can an image cover a table in html?图片可以覆盖html中的表格吗？
【发布时间】：2014-01-12 09:57:15
【问题描述】：

我无法将表格隐藏在图片下方。请访问以下链接。

有没有办法把一张桌子隐藏在一张图片后面？就像 microsoft word 中的文本换行（文本前面），其中前面显示图片，后面（隐藏）是表格。顺便提一句。给出更多的想法。我想把桌子隐藏在图片后面，因为我的图片有一个悬停动画，当你悬停在它上面时，图片会移开，从而露出桌子（这是我的概念）

我的 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;
}

【问题讨论】：

什么呀，请显示 HTML........
prntscr.com/2dkork
prntscr.com/2dkotb
查看链接..stackoverflow.com/questions/20704496/…

标签： html css image html-table

【解决方案1】：

您可以轻松地使用它：样式.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>

【讨论】：

【解决方案2】：

是的，你可以。

与表格相比，在图像上使用更高的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;
}

【讨论】：

@user3131639：请不要编辑此答案以包含您的代码。请编辑您的问题以包含您的代码。
很抱歉 xD 是这个网站的新手，所以很困惑（第一次网站）没有注意到

【解决方案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>

【讨论】：

【解决方案4】：

<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;
}

【讨论】：

【解决方案5】：

试试这个简单的：-

table {z-index: 0;}

img {z-index: 1;}

【讨论】：