html - 如何删除图像上的选择

Question

我想删除页面上所有图像的选择突出显示。我发现了一些有用的补充，例如：

CSS

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

但是当我按下鼠标按钮并选择多个内容或按下Ctrl+A“全选”时，我的图像会以蓝色阴影突出显示。我试图通过以下方式更改它：

CSS

img::selection      {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}

但这没有任何影响。

有人有有用的解决方案还是还没有？

PS：我不在乎选择我的图像 - 我只是想摆脱那个蓝色的形状。

Answer 1

Here goes a wacky solution I came up with...

1) After some testing I found that this only occurs on mozilla. Other browsers don't show the blue selection on images when the code

img::selection {
    background: transparent;
}

is set.

2) Even mozilla - only has a problem with image elements. But other elements with a background-image obey the ::selection rule.

So technically we could work around this assuming we add an empty span in our markup after each img element which we set to display:none;

Then we can add some CSS which will only run in firefox which sets the images to display:none and places a background-image on the adjacent span.

Like this:

FIDDLE

**

img::selection {
    background: transparent;
}
img + span {
    display: none;
}

@-moz-document url-prefix() {
    img {
        display: none;
    }
    
    img + span {
        background: url(http://placehold.it/200x200) no-repeat;
        width: 200px;
        height: 200px;
        display: block;
    }
}

<div>Hello there </div>

<img src="http://placehold.it/200x200" /><span></span>

<div>Hello there </div>

1: http://jsfiddle.net/GMuzV/30/

Answer 2

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