右键单击图像时显示此内容答案

【问题标题】：display this when right click on an image右键单击图像时显示此内容
【发布时间】：2020-07-22 15:44:21
【问题描述】：

我尝试创建一个网站来显示带有图像的每个产品，但我想禁用它让用户下载当用户右键单击图像的产品时，他/她可以'不要下载它或在新标签上打开图像下载，我在 StackOverflow 上阅读了很多关于它的问题，但没有告诉我如何去做。我想显示下图中出现的此框。

请帮帮我。

【问题讨论】：

你是说 www 上没有关于如何在右键单击时有事件处理程序的地方吗？
这是 90 年代/2000 年代初期的流行要求。 PHP 与此无关。这也不是安全的。如果您不希望用户能够获取图像，请不要与他们共享。其他一切都是默默无闻的安全。这是一个看起来像是从 2000 年代初开始的教程，上面的代码仍然有效pagetutor.com/no_right_click。
@GetSet 我知道如果你有技术经验，你可以禁用 js 并下载图像，但我这样做是为了防止。我不知道这是最好的方法。如果你知道好的方法请告诉我。
@user3783243 谢谢。我读了它，但我不知道哪种方法是正确的。如果你知道，请告诉我...
@LanDanel 签出我的代码，即使用户已经禁用了 JS，它也可以工作，因为只使用了 HTML 和 CSS。

标签： javascript php html css twitter-bootstrap

【解决方案1】：

像这样盖住你的图片

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>some title</title>
  <style>
    * {
      box-sizing: border-box;
    }
    .img-container {
      width: 300px;
      height: 200px;
      position: relative;
    }
    .img-container img, .img-container .img-cover {
      width: 100%;
      height: 100%;
    }
    .img-container .img-cover {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>

  <div class="img-container">
    <img src="your_image.png">
    <div class="img-cover"></div>
  </div>

</body>
</html>

【讨论】：