html - 我在真实图像上叠加透明图像的代码哪里出错了？

Question

我一直在尝试在我的真实图像上覆盖一个透明图像，这样如果有人试图右键单击图像，他就会下载透明图像，而不是真实图像。我在谷歌搜索时遇到了以下简单代码，并一直在尝试调整它以适应我博客的代码。但是一直没有成功。

<div style="width:180px;height:186px;">
<img src="kids.jpg" width="180" height="186" alt="" style="z-index:0; position:absolute;" />
<img src="cover.gif" width="180" height="186" alt="My Kids"" style="z-index:1; position:absolute;" />
</div>

我创建了一个透明的 1 x 1 像素 gif 图像，并在代码中尝试使其大小与我的真实图像相同。但出于某种原因，透明图像被放置在我的真实图像下方而不是覆盖在它上面，即使我已经为它们使用了 z-indexes。我想我对他们的位置(绝对位置或相对位置)有误。还是我在其他地方也出错了？

这是我正在尝试的代码:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;">
<a href="https://4.bp.blogspot.com/-NJFva1CFgDQ/XMaJHwr_HfI/AAAAAAAADyA/OWPQ74ewwkkACWrByh-ALzin4_PQpfcYQCLcBGAs/s1600/Rice-Kheer-1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto; position: relative; z-index: 0;"><img alt="Rice Kheer" border="0" data-original-height="1000" data-original-width="1500" height="426" src="https://4.bp.blogspot.com/-NJFva1CFgDQ/XMaJHwr_HfI/AAAAAAAADyA/OWPQ74ewwkkACWrByh-ALzin4_PQpfcYQCLcBGAs/s640/Rice-Kheer-1.jpg" title="Rice Kheer" width="640" /></a>
<a href="https://1.bp.blogspot.com/-xgpK1w1fuzg/XWNGJvO_wII/AAAAAAAAD0Y/k4o6yjDttBst_B73xjE6W8HcDmZmGOZigCLcBGAs/s1600/image.gif" imageanchor="1" style="margin-left: auto; margin-right: auto; position: relative; z-index: 1;"><img border="0" data-original-height="1000" data-original-width="1500" height="426" src="https://1.bp.blogspot.com/-xgpK1w1fuzg/XWNGJvO_wII/AAAAAAAAD0Y/k4o6yjDttBst_B73xjE6W8HcDmZmGOZigCLcBGAs/s1600/image.gif" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Odisha Special Rice Kheer</td></tr>
</tbody></table>

Answer 1

使用 position:absolute; 来实现这一点。

除此之外，您还可以将 oncontextmenu="return false" 添加到您的标签中以防止右键单击。这些是您可以采取的一些步骤来防止使用下载您的图像，但遗憾的是没有完整的证明解决方案。

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;">
  <tbody>
    <tr>
      <td style="text-align: center;position: relative;">
        <a href="https://4.bp.blogspot.com/-NJFva1CFgDQ/XMaJHwr_HfI/AAAAAAAADyA/OWPQ74ewwkkACWrByh-ALzin4_PQpfcYQCLcBGAs/s1600/Rice-Kheer-1.jpg" imageanchor="1" style="/* margin-left: auto; *//* margin-right: auto; *//* position: relative; *//* z-index: 0; */display: block;"><img alt="Rice Kheer" border="0" data-original-height="1000" data-original-width="1500" height="426" src="https://4.bp.blogspot.com/-NJFva1CFgDQ/XMaJHwr_HfI/AAAAAAAADyA/OWPQ74ewwkkACWrByh-ALzin4_PQpfcYQCLcBGAs/s640/Rice-Kheer-1.jpg" title="Rice Kheer"
            width="640"></a>
        <img border="0" data-original-height="1000" data-original-width="1500" src="https://1.bp.blogspot.com/-xgpK1w1fuzg/XWNGJvO_wII/AAAAAAAAD0Y/k4o6yjDttBst_B73xjE6W8HcDmZmGOZigCLcBGAs/s1600/image.gif" width="640" style="
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
">
      </td>
    </tr>
    <tr>
      <td class="tr-caption" style="text-align: center;">Odisha Special Rice Kheer</td>
    </tr>
  </tbody>
</table>