防止选择图像和文本答案

【问题标题】：Preventing images and text to be selected防止选择图像和文本
【发布时间】：2019-09-19 05:49:46
【问题描述】：

我有一张图片作为背景图片被入侵（如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>

有什么想法吗？

【问题讨论】：

css rule to disable text selection highlighting的可能重复
我认为您应该使用-moz-user-select: none; 而不是-moz-user-select: -moz-none;。否则，我认为这应该可行。
PS 如果你想要一个漂亮的背景担架，请使用 bgStretcher.js 在我的网站上像梦一样工作 - 但我将它破解到我自己的版本缓存/预加载图像，因为我加载高清图像.. 和硬编码 noSelect在那里..

标签： html css

【解决方案1】：

将此添加到您的样式表中

.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 上。

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

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

这是一个工作示例：
http://jsfiddle.net/xugy6shd/3/

【讨论】：

我看不出这与提问者已经尝试过的有什么不同。他没有对他的整个文件应用任何东西。他只是将课程命名为 .unselectable 而不是 .selectDisable
啊，好吧，然后做一个 jquery $('body').addClass('selectDisable');但是不建议像我在回答中提到的那样将 select none 应用于整个 BODY - 仅应用于一个元素
拖动与选择不同。选择是当您在图像周围拖动文本并且图像变为蓝色（从选择颜色）但是当您只需单击并拖动可拖动的图像时......但不可选择。我刚刚检查了它，它做了它应该做的事情。除非你使用一些非标准的浏览器？我更新了 jsfiddle 供您考虑..

【解决方案2】：

draggable="false" 为我工作

【讨论】：

【解决方案3】：

如果您将图像加载为div 的背景，则无法选择它。

编辑

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

【讨论】：

这是真的-但可能会有其他副作用..但下次添加一些代码！

【解决方案4】：

如果您使用的是 jQuery，我已经编写了一个小型 jQuery 插件 - 包装器几乎可以完成 ppumkin 所写的操作：

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

【讨论】：

如果您只需要应用样式，为什么还要制作插件。而且你的插件有一个丑陋的副作用..如果我尝试在 webkit 中选择它会拖动包装的容器。
对我来说这不会发生——不是在 chrome 中，也不是在 safari 中。 – 我在 OS X 上。你在 Windows 上测试过吗？
这很有趣。我从未在 Mac Safari 中测试过它——只有 Win Safari 并且没问题.. 还有 Chrome = Safari 即 webkit 引擎.. 所以我不确定..
脚本是必需的，因为 IE msdn.microsoft.com/en-us/library/ms537840%28VS.85%29.aspx – 使用脚本（我没有写它只是为了回答这个问题:-)）你可以覆盖所有主要的浏览器.本质上，这个脚本应用了你为现代浏览器编写的相同 CSS，我看不出效果与应用类有什么不同。
很公平 - 我会告诉你我不喜欢什么 - 但我不能被要求制作电影 =) 无论如何都做得很好。