Предотвращение выбора изображений и текста

Question

У меня есть изображение, взломанное как фоновое изображение (как показано здесь ).Я заметил, что если я наведу на него мышку, он выберет изображение, чтобы его нельзя было отменить.Я пробовал следующий код безрезультатно:

    <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 к элементу, который вы хотите предотвратить.

Эффект перетаскивания возникает в веб-наборе (Chrome, Safari, Opera). Это не происходит в Firefox.

Это не относится ко всему документу, если у вас есть текстовый контент, потому что тогда вы не сможете выбрать текст, который не очень удобен для пользователя.

Вы также можете предотвратить перетаскивание, добавив еще один пустой div поверх изображения с тем же классом selectDisable.

Вот рабочий пример:
http://jsfiddle.net/xugy6shd/3/

Answer 2

Если вы загружаете изображение в качестве фона div, вы не можете выбрать его.

---

EDIT

 <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/