css - 透过表格的背景看到网站的背景

Question

这很难解释，但我会尝试。我在 CSS 中有一个背景图像，然后我在它的顶部有一个表格，它有一个白色背景。所以你不能在 CSS 中看到背景。

但我想要的效果是能够将鼠标悬停在圆形图像或形状上，然后显示该小区域的背景。

一种可视化的方法，我在桌子上放了一张照片，我在图像上放了一张纸，所以没有图像在视图中。我现在在纸上剪了一个洞，这样我就可以通过那个洞看到照片了。另外，当我将纸张移动到图像后面时，我会看到不同的部分。

任何想法都会很棒，但如果这是不可能的，我可以理解。

score 2 · Accepted Answer

您可以将背景颜色放在单个表格单元格上，而不是在整个表格上放置背景颜色。

td, th { background:#fff; }

然后，当您将鼠标悬停在表格单元格上时：

td:hover, th:hover { background:none; }

或者，如果您想显示更大的区域，您可以将一个类添加到一组单元格上，然后执行与上述相同的操作以关闭该单元格组的背景，这些单元格都具有特定的类：

td.my-class-name:hover, th.my-class-name:hover { background:none; }

显然，这不是圆形，而是一种可能的解决方案。

score 1 · Accepted Answer

您可以transparent在悬停时将表格单元格的背景颜色之一设置为。虽然，要完成这项工作，您应该将白色背景设置为td，而不是table，如下所示：

td {
    background-color:white;
}

td:hover {
    background-color: transparent;
}

JSFiddle
http://jsfiddle.net/a2jp5/1/

2 回答 2