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选择＆＃34;选择全部＆＃34;我的图像以蓝色阴影突出显示。我试图通过以下方式改变它：

CSS

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

但这没有任何效果。

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

P.S。：我不在乎选择我的图像 - 我只是想摆脱那种蓝色的形状。

Answer 1

我想出了一个古怪的解决方案......

1）经过一些测试后，我发现这只发生在mozilla上。其他浏览器在代码

时不显示图像上的蓝色选择

img::selection {
    background: transparent;
}

已设定。

2）即使是mozilla - 只有图像元素有问题。但是background-image符合::selection规则的其他元素。

所以技术上我们可以解决这个问题，假设我们在我们设置为显示的每个img元素后在我们的标记中添加一个空的span：无;

然后我们可以添加一些只在firefox中运行的CSS，它将图像设置为display:none并在相邻的span上放置背景图像。

像这样：

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

如何删除图像上的选择

2 个答案: