我想将附加图像放在不透明的表格上方。在我的实际代码中，表格具有可点击的链接，因此要禁用它，我需要将此图像放在表格上方。图像应该在透明容器中穿过表格。 问题 1:图像未放置在(横跨)表格上方，而是显示在表格下方 问题 2:图像应位于某个 div 或某种类型中，以便透明覆盖整个表格。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container {
position: absolute;
max-width;400px;
}
.container img {vertical-align: middle;}
.container .content {
position:relative;
top: 0;
left:0;
bottom: 0;
right: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(255, 255, 255, 0.5); /* Black background with 0.5 opacity */
font-size: 50px;
text-align: center;
font-style: italic;
padding: 40px;
padding-top: 180px;
color: grey;
/* Rotate div */
-ms-transform: rotate(-25deg); /* IE 9 */
-webkit-transform: rotate(-25deg); /* Chrome, Safari, Opera */
transform: rotate(-25deg);
}
</style>
</head>
<body>
<h2>Responsive Image with Transparent Text</h2>
<div class="container">
<TABLE width="800px">
<TR>
<TD>Test</TD>
<TD>Test</TD>
<TD>Test</TD>
</TR>
<TR>
<TD>Test</TD>
<TD>Test</TD>
<TD>Test</TD>
</TR>
<TR>
<TD>Test</TD>
<TD>Test</TD>
<TD>Test</TD>
</TR>
<TR>
<TD>Test</TD>
<TD>Test</TD>
<TD>Test</TD>
</TR>
<TR>
<TD>Test</TD>
<TD>Test</TD>
<TD>Test</TD>
</TR>
</TABLE>
<div class="content">
<IMG SRC="ComingSoon.png" WIDTH="548" HEIGHT="53" BORDER="0" ALT="">
</div>
</div>
</body>
</html> 
最佳答案
好吧，通过在链接上放置图片来使链接无法点击是一种老掉牙的解决方案，但我该判断谁呢？我们都知道有时候有些情况下，一个快速、hacky 的解决方案就绰绰有余了……;-) 所以给你:
1。交换 .container 和 .container .content 的 position 属性。
(使 .container 相对 和 .container .content 绝对。)
制作 .container .content absolute 会将其定位在表格上。
从技术上讲，您也可以保留 .container absolute，但我不建议这样做，因为 CSS 中的定位方式:absolute 不一定是页面中的绝对位置，但在下一个positioned 祖先中，positioned 表示“具有position 属性”。 (如果没有定位的祖先，则 body 是引用。)
所以 .container 的位置很重要，否则你的图片也会挡住标题。为了实现这一点，给它一个具有任何值的位置属性就足够了。但是 relative 在这种情况下是一个更安全的值，因为它不会真正影响元素的位置，除非你也给一个 left/right/top 或 bottom 属性。另一方面，absolute 在某些情况下可能会扰乱您的整体页面布局。
2。不要旋转 .container .content，而是旋转 .container .content img。
旋转 .container .content 会导致它部分遮挡标题。
3。从 .container.content 中删除 bottom: 0 和 right: 0。
虽然这一步并不是实现您想要的真正必要的，但这些属性已过时。您要么想要从顶部或底部，以及从左侧或右侧给出元素的位置。 如果您同时提供这两个属性，浏览器将只忽略其中一个(可能是第一个)。
我希望我的解释是可以理解的...:-D
干杯!
关于html - 将图像放在不透明的 table 正上方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54045673/