我在制作表格隐藏在图片下方时遇到了问题。请访问以下链接。
有没有办法隐藏图片背后的表格？就像微软词（文本前面）中的文本包装一样，其中正面显示图片，而背面（隐藏）是表格。顺便说一句。给出更多的想法。我想把图片隐藏在图片背后，因为我的图片有一个悬停动画，当你将鼠标悬停在它上面时，图片会移开，因此会显示表格（这是我的概念）
我的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;
}
是的你可以。
与表格相比，在图像上使用更高的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;
}
<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;
}
试试这个
<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>
试试这个简单： -
table {z-index: 0;}
img {z-index: 1;}
你可以轻松使用它：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>