防止图像和文本被选择

我有一个图像作为背景图像被入侵（如图here）。我注意到，如果我将鼠标拖过它，它会选择图像，以便它不能被取消选择。我试过以下代码无济于事：防止图像和文本被选择

<style type="text/css"> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     img#bg { 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
     } 
     #content { 
      position:relative; 
      z-index:1; 
      top:0px; 
      left:0px; 
     } 
     *.unselectable { 
      -moz-user-select: -moz-none; 
      -khtml-user-select: none; 
      -webkit-user-select: none; 
      -o-user-select: none; 
      user-select: none; 
     } 
    </style>

任何想法？

来源

2011-05-06 FreeSnow

可能重复http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection -highlighting） – kapa 2011-05-06 17:45:26

我想你应该使用'-moz-user-select：none;'而不是'-moz-user-select：-moz-none;'。否则，我认为这应该工作。 – 2011-05-06 17:49:05

PS如果你想要一个不错的背景担架使用bgStretcher.js在我的网站上工作就像一个梦 - 但我砍了它到我自己的版本缓存/ preload图像导致我加载高清图像..和硬编码noSelect在那里.. – ppumkin 2011-05-06 17:58:57

添加到您的样式表

.selectDisable { 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

.selectEnable { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
}

只是类selectDisable添加到您希望被选中，以防止元素。

拖放效果发生在webkit上（chrome，safari，opera）。它不会发生在Firefox上。

如果您有文本内容，这不适用于您的整个文档，因为那样您将无法选择文本，这不是非常用户友好的。

您还可以通过在图像顶部添加另一个空的div来防止拖动，并使用相同的selectDisable类。

这里是一个工作示例：
http://jsfiddle.net/Ma9MT/1/

来源

2011-05-06 17:43:35 ppumkin

我不喜欢我不明白这与提问者已经尝试的方式有什么不同。他没有对他的整个文件进行任何申请。他刚刚命名为'.unselectable'而不是'.selectDisable'类。 – 2011-05-06 17:50:01

Ahh ok然后做一个jquery $（'body'）。addClass（'selectDisable'）;但不建议像我在我的答案中提到的那样，将整个BODY应用于选择无 - 仅适用于元素 – ppumkin 2011-05-06 17:53:48

简单！ http://jsfiddle.net/Ma9MT/1/ – ppumkin 2011-05-06 17:56:15

如果您正在使用jQuery我写了一个很小的jQuery插件 - 包装，确实差不多就是ppumkin写道：

（插件是在JS部分以及一个示例用法）http://jsfiddle.net/gryzzly/HtvB8/

来源

2011-05-06 18:07:46

为什么要做一个插件，如果你所需要的只是应用一种风格。你的插件有一个丑陋的副作用..如果我尝试在webkit中选择它拖动包装的容器。 – ppumkin 2011-05-06 18:54:13

对我来说，它不会发生 - 不是在铬中，也不在safari中。 - 我在OS X上。你在Windows上测试过吗？ – 2011-05-07 10:38:34

这很有趣。我从来没有在Mac Safari中测试它 - 只有赢得Safari浏览器，它是OK ..也Chrome = Safari ie webkit引擎..所以我不知道.. – ppumkin 2011-05-07 10:42:34

如果您加载图像为div的背景，您不能选择它。

EDIT

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

[CSS规则来禁用文本选择高亮]（的

来源

2011-05-06 18:24:52

它的确如此 - 但可能会有其他副作用，但下次添加一些代码！ – ppumkin 2011-05-06 18:58:50

防止图像和文本被选择

回答

相关问题