如何禁用图像上的突出显示答案

【问题标题】：How to disable highlight on a image如何禁用图像上的突出显示
【发布时间】：2011-10-12 13:33:36
【问题描述】：

我正在尝试禁用图像上的突出显示，当我用鼠标在图像上移动并拖动时，看一看：

非常感谢！

【问题讨论】：

这是 google 上某些搜索的最高结果。我认为this 是你们许多人正在寻找的！
CSS rule to disable text selection highlighting的可能重复

标签： html css

【解决方案1】：

尝试将其作为css背景而不是img元素。

【讨论】：

【解决方案2】：

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

【讨论】：

@Phil 你可以编辑你的答案，所以它不再不正确。关于删除已接受的答案以及为什么不应该删除它的讨论很激烈。 meta.stackoverflow.com/questions/272849/…

【解决方案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 以编程方式禁用它。

【讨论】：

2019 年了，选择伪选择器现在是最好的解决方案。

【解决方案4】：

这禁用了 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"));

【讨论】：

伟大的技术，解决了 android webview。谢谢。

【解决方案5】：

使用user-select 属性：

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

【讨论】：

我认为这是迄今为止最干净的方法。此外，对于像我一样想在图像中禁用奇怪效果的任何人，请查看draggable 属性。在 img 标签中将其设置为 false 将避免用户意外（或不）拖动它时出现重影。

【解决方案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;
}

【讨论】：

【解决方案9】：

如果您在单击图像时遇到问题，这里是解决方案。

img {
  -webkit-tap-highlight-color: transparent;
}

如果不起作用，请在包含图像整个宽度的图像的父级中尝试。

【讨论】：