css - 使用css禁用图像上的另存为并在新选项卡中打开？

Question

我知道这样做没有意义，但我想问一下是否可以禁用仅使用 css 的图像的右键单击。

- 我想要做的是禁止天真的用户从我的 WordPress 网站 slider (MetaSlider) 保存图像

Answer 1

您可以在图像上方使用叠加层来避免这种情况:

.img-container {
  position: relative;
}

.img-container:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}

<div class="img-container">
  <img src="https://lorempixel.com/400/400/" />
</div>

这将避免通常的保存图像操作 但是 任何有经验的开发人员总是能够获得图像(源代码、检查元素、屏幕截图等)。
无论您将做什么，您都无法阻止任何用户保存图像，因为在所有情况下，图像都与网页一起提供并且它存在于客户端。