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

Question

我正在尝试禁用图像上的高光，当我用鼠标移动图像并拖动时， 看一看 ：

非常感谢！

Answer 1

使用user-select属性：

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

Answer 2

您可以尝试此操作（这不适用于所有浏览器）：

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

Answer 3

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

Answer 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"));

Answer 5

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

Answer 6

如果这里有些人对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;
}

Answer 7

要从整个网站中删除所选文字和图像，请使用正文选择器

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

Answer 8

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

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

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

Answer 9

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