html - 如何使徽标不可拖动

Question

我刚刚读了一遍：

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

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

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

Answer 1

Set the CSS property of the image as:-

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

Answer 2

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

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="CSS Wizardry" 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;

Answer 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 的来源：防止图像在不使用 JS 的情况下可拖动或可选择