html – 防止选择图像和文本

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

有任何想法吗？

解决方法

将其添加到样式表中

.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/Ma9MT/1/