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

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

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

Любые идеи?

Ответы

Ответ 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/

Ответ 2

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

ИЗМЕНИТЬ

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

Ответ 3

Если вы используете jQuery, я написал крошечный плагин jQuery для плагинов, который делает в значительной степени то, что написал ppumkin:

(плагин находится в js-части вместе с примером использования) http://jsfiddle.net/gryzzly/HtvB8/

Ответ 4

draggable="false" работал на меня