图像可以覆盖html格式的表格吗？_Html_Css_Image_Html Table

图像可以覆盖html格式的表格吗？

html css image

图像可以覆盖html格式的表格吗？,html,css,image,html-table,Html,Css,Image,Html Table,我把桌子藏在图片下面有问题。请访问下面的链接有没有办法把桌子藏在图片后面？就像microsoft word中的文字包装一样（在文字前面），其中正面显示图片，背面（隐藏）显示表格。顺便说一句，给更多的想法。我想将表格隐藏在图片后面，因为我的图片有一个悬停动画，当您将鼠标悬停到它时，图片将移开，从而显示表格（这是我的概念）我的HTML: 和试试这个简单的方法：- table {z-index: 0;} img {z-index: 1;} 试试这个简单的方法：- table {z-in

我把桌子藏在图片下面有问题。请访问下面的链接

有没有办法把桌子藏在图片后面？就像microsoft word中的文字包装一样（在文字前面），其中正面显示图片，背面（隐藏）显示表格。顺便说一句，给更多的想法。我想将表格隐藏在图片后面，因为我的图片有一个悬停动画，当您将鼠标悬停到它时，图片将移开，从而显示表格（这是我的概念）

我的HTML:

和

试试这个简单的方法：-

table {z-index: 0;}

img {z-index: 1;}

试试这个简单的方法：-

table {z-index: 0;}

img {z-index: 1;}

试试这个

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


你好
.td{
背景图像：url（'../somepath.png'）；
高度：100px；
宽度：100px；
}
.td span{
显示：无；
}
.td:悬停
{
背景：无；
}
.td：悬停跨度{
显示：块；
}

试试这个

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


你好
.td{
背景图像：url（'../somepath.png'）；
高度：100px；
宽度：100px；
}
.td span{
显示：无；
}
.td:悬停
{
背景：无；
}
.td：悬停跨度{
显示：块；
}

是的，你可以

与表格相比，在图像上使用更高的

z-index

。为了更好地控制，请将表格包装在

div

中，以避免表格内容溢出时出血。为图像和表格提供一个尺寸，使其相互匹配。使用绝对定位将它们整齐地放置在彼此的顶部

看这把小提琴：

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

是的，你可以

与表格相比，在图像上使用更高的

z-index

。为了更好地控制，请将表格包装在

div

中，以避免表格内容溢出时出血。为图像和表格提供一个尺寸，使其相互匹配。使用绝对定位将它们整齐地放置在彼此的顶部

看这把小提琴：

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

您可以轻松地使用此选项： 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>


.myTableBg{宽度：180px；
背景：#dedede url（/pix/web_graphics/free_website_graphics/background_patterns/1018.gif）重复；
边界塌陷：塌陷；
}
.myTableBg td、.myTableBg th{边框：2px纯白；填充：5px；}
表格标题表格标题
表单元格1表单元格2
表单元格3表单元格4
表单元格5表单元格6

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


.myTableBg{宽度：180px；
背景：#dedede url（/pix/web_graphics/free_website_graphics/background_patterns/1018.gif）重复；
边界塌陷：塌陷；
}
.myTableBg td、.myTableBg th{边框：2px纯白；填充：5px；}
表格标题表格标题
表单元格1表单元格2
表单元格3表单元格4
表单元格5表单元格6

what yaar，plz显示HTML…….查看链接..what yaar，plz显示HTML…….查看链接..@user3131639:请不要编辑此答案以包含您的代码。请编辑您的问题以包含您的代码。很抱歉，xD新加入此网站，所以困惑（第一次访问此网站）没有noticed@user3131639：请不要编辑此答案以包含您的代码。请编辑您的问题以包含您的代码。很抱歉，xD新加入此网站，因此困惑（第一次访问此网站）没有注意到