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

Question

我试图在图像上禁用高亮显示,当我用鼠标移动图像并拖动时,看看:

非常感谢!

Answer 1

使用用户选择属性:

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>具有适当宽度和高度的a并在其上使用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

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

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