如何使图像在 html 中不可拖动 - CSS

在 html 中，我们可以通过 <img> 标签来插入图片。但是有时候我们希望这些图片不能被拖动。下面我们介绍如何通过 CSS 实现这个效果。

方法一：使用 user-select 属性

user-select 属性可以控制元素是否能被用户选中，从而达到不可拖动的效果。

将 user-select 属性设置为 none 即可：

img {
  -moz-user-select: none; /* 火狐浏览器 */
  -ms-user-select: none; /* Internet Explorer */
  -webkit-user-select: none; /* Safari 和 Chrome */
  user-select: none;
}

方法二：使用 draggable 属性

HTML5 引入了 draggable 属性，可以控制元素是否可被拖动。将其设置为 false 就可以实现不可拖动的效果。

<img src="image.jpg" alt="image" draggable="false">

总结

以上就是两种实现图像在 html 中不可拖动的方法。使用哪种方法取决于具体的场景，可以灵活选择。