Question

我将图像作为背景图像入侵（如图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>

有什么想法吗？

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

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

您还可以使用相同的div类在图片上添加另一个空selectDisable来阻止拖动。

这是一个有效的例子：
http://jsfiddle.net/xugy6shd/3/

Answer 2

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

修改

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

Answer 3

如果您正在使用jQuery，我已经编写了一个小的jQuery插件 - 包装器几乎与ppumkin写的一样：

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

Answer 4

'custom_map_style' => 'yes',为我工作

防止选择图像和文本

4 个答案: