我想删除我页面上所有图像的选择突出显示。 我发现了一些有用的补充,例如:
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;}
但这没有任何效果。
有人有有用的解决方案还是还没有?
附言: 我不关心选择我的图像 - 我只是想摆脱那个蓝色的形状。
最佳答案
这是我想出的一个古怪的解决方案......
1) 经过一些测试,我发现这只发生在 mozilla 上。当代码
img::selection {
background: transparent;
}
已设置。
2) 即使是 mozilla - 也只有图像元素有问题。但是具有 background-image
的其他元素遵守 ::selection
规则。
因此,技术上我们可以解决这个问题,假设我们在我们设置为 display:none 的每个 img 元素后的标记中添加一个空范围;
然后我们可以添加一些只在 firefox 中运行的 CSS,它将图像设置为 display:none
并在相邻的 span 上放置一个背景图像。
像这样:
**
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>
关于html - 如何删除图像上的选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25816725/