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;}

但这没有任何效果。

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

附言: 我不关心选择我的图像 - 我只是想摆脱那个蓝色的形状。

Answer 1

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

1) 经过一些测试，我发现这只发生在 mozilla 上。当代码

img::selection {
    background: transparent;
}

已设置。

2) 即使是 mozilla - 也只有图像元素有问题。但是具有 background-image 的其他元素遵守 ::selection 规则。

因此，技术上我们可以解决这个问题，假设我们在我们设置为 display:none 的每个 img 元素后的标记中添加一个空范围；

然后我们可以添加一些只在 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/