Question

我刚读过：

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

他声明我不应该使用<h1>作为我的徽标...我应该使用<img>。

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

Answer 1

将图像的CSS属性设置为： -

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

Answer 2

您为<img>标记使用1×1透明GIF，然后使用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来源：Preventing an image from being draggable or selectable without using JS

如何使<img/>徽标无法拖动

3 个答案: