Как отключить выделение на изображении

Ответ 1

Это свойство браузера, которое нельзя отключить (если вы не хотите использовать смешную сумму js), если вы используете тег <img />. Вы можете использовать его в фоновом режиме с помощью CSS, хотя это сделает его неприступным

Ответ 2

Используйте user-select свойство:

img{
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

Ответ 3

Вы можете попробовать это (это не будет работать во всех браузерах):

img::-moz-selection {
    background-color: transparent;
    color: #000;
}

img::selection {
    background-color: transparent;
    color: #000;
}

Или вы можете использовать <div> с соответствующей шириной и высотой и использовать фоновое изображение CSS на нем. Например, я использую это на своем сайте:

<div id="header"></div>

#header {
    height: 79px;
    width: 401px;
    background: url(http://nclabs.org/images/header.png) no-repeat;
}

И, наконец, вы можете использовать Javascript для его программного отключения.

Ответ 4

Попробуйте поместить его в качестве фона css вместо элемента img.

Ответ 5

Это отключенное выделение элемента DOM:

function disableSelection(target){
    if (typeof target.onselectstart!="undefined") // if IE
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
        target.style.MozUserSelect="none";
    else // others
        target.onmousedown=function(){return false;}

    target.style.cursor = "default";
}

Используйте его следующим образом:

disableSelection(document.getElementById("my_image"));

Ответ 6

img{
   -ms-user-select: none;      /* IE 10+ */
   -moz-user-select: none;     /* Firefox all */
   -webkit-user-select: none;  /* Chrome all / Safari all */
   user-select: none;          /* Likely future */      
}

Ответ 7

В случае, если некоторые люди здесь заинтересованы в sass mixin:

// Prevent users to select an element
@mixin no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Ответ 8

Чтобы удалить выделение текста и изображений со всего веб-сайта, используйте селектор тела

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}