使图像不可拖动的 CSS

有时候我们需要在网站中嵌入图片，但又不希望用户可以通过拖动来将其复制或下载。这时候我们可以使用 CSS 来禁用图片的拖拽功能，从而保护我们的图片版权。

CSS 属性：

img {
  pointer-events: none;
}

这个 CSS 属性可以设置元素是否可以触发鼠标事件，将其设置为 none 则表示无法触发事件。当应用于图片元素时，就可以避免用户拖拽图片。

但这会导致图片无法被点击，所以如果需要可点击的图片，可以在外部元素上应用这个属性，而不是在图片本身上应用。

兼容性：

这个属性存在跨浏览器的兼容性问题，不是所有浏览器都支持。

• Chrome 2.0+
• Firefox 3.6+
• Safari 3.0+
• Opera 12.1+
• IE 11+
• Edge 12+

示例代码：

<div class="img-container">
  <img src="https://example.com/image.jpg">
</div>

.img-container {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

在这个例子中，我们在容器上应用了 overflow: hidden 属性来隐藏图片的溢出部分，而在图片元素上应用了 pointer-events: none 属性来禁用拖拽功能。