如何使 <IMG> 标志不可拖动

Posted 2023-03-06

【中文标题】如何使 <IMG> 标志不可拖动

【英文标题】：How to make <IMG> logo not draggable

【发布时间】：2013-09-09 17:25:48

【问题描述】：

我刚刚读了一遍：

http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

他说我不应该使用<h1> 作为我的标志...我应该使用<img>。

但是如何使用<img> 使图像不可拖动？他的网站似乎使用<img> 来放置徽标图像，但它也是不可拖动的..

【问题讨论】：

您是否担心有人使用拖放功能窃取您的图像？因为如果是这样，您应该意识到您实际上无法阻止任何人“窃取”您已经提供给他们的图像。

我质疑那篇文章的有效性。在您的徽标或网站的总标题中使用 <h1> 与可访问性有关。

@Wooble 这不是我关心的问题...我喜欢非拖拽图像的美感。

我在火狐上，我可以拖动它。

标志是内容图像还是装饰图像是有争议的（应该注意<h1><img src="..." alt="Coca Cola" /></h1> 是完全有效的）。我的观点是，如果重新设计时图像内容永远不会改变，那么它就是内容图像，应该通过<img /> 嵌入。否则它是装饰性的并且属于 CSS。 “我喜欢我不能拖它”不是选择一种技术而不是另一种技术的好理由。

【参考方案1】：

设置图片的CSS属性为：-

user-drag: none; -moz-user-select: none; -webkit-user-drag: none;

【参考方案2】：

您为<img> 标记使用1×1 透明GIF，然后使用CSS 设置它的大小和背景图像。如果有人拖动图像，他们拖动的是透明的 GIF，而不是可见的徽标。在他的页面中，源代码如下：

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="  class="s  s--csswizardry-logo">

“s s--csswizardry-logo”在哪里：

background-image: url(/img/css/sprites/main.svg);
-webkit-background-size: 500px 500px;
-moz-background-size: 500px 500px;
-ms-background-size: 500px 500px;
-o-background-size: 500px 500px;
background-size: 500px 500px;
width: 128px;
height: 128px;
background-position: -10px -10px;

【讨论】：

这很有趣..在文章中他说“停止将徽标用作背景”，但实际上确实是这样做的..我知道仍然有一个 <img> 元素，但仍然..跨度>

我没有在页面中注意到这一点。我喜欢那里的讽刺。

这很有趣，我刚刚看到 并假设他正在使用它来显示图像。他的方法是对 css 背景的另一种演绎。这是有缺陷的，因为当您尝试打印他的页面时，隐藏的徽标被认为是背景而不是内容。

【参考方案3】：

只需使用以下代码：

<img href="img.png" draggable="false" />

如果您认为它无法选择，请在 CSS 中使用此代码：

user-drag: none;
user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

CSS 来源：Preventing an image from being draggable or selectable without using JS