Question

我正在尝试使用CSS ::selection伪元素更改网站的选择颜色。

如this jsFiddle所示，文本在被选中时应该具有完全黑色的背景色。在Firefox上，就是这种情况。

然而，在Chrome上，颜色并非绝对是黑色。 Chrome似乎在摆弄我的颜色。

如果你leave the text black while selecting，你可以看到这一点：在Firefox上它变得不可见，而在Chrome上你仍然可以看到它。

我已经注意到了这种对我正在使用的其他背景颜色的影响：它们在Chrome上总是有些偏差。在我看来，似乎添加了一点红色。

如何在Chrome上获得我想要的真实颜色？

Answer 1

可能是为了防止你想要做的事情，如果它是1，Chrome似乎会改变选择背景颜色的不透明度。你可以通过将不透明度设置为非常接近1来欺骗这个（{{1 }}

http://jsfiddle.net/ExplosionPIlls/a3gfR/5/

Answer 2

当您使用上述建议 Firefox 在您选择图片时仍然会显示淡蓝色颜色它。

我可以通过以下代码摆脱它：

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

现在可以通过选择忽略图像。

因此，通过应用此代码，我可以在所有浏览器上获得更强大的统一外观。

*::selection {
    /* WebKit/Blink Browsers */
    background-color: rgba(0,0,0,.99); /* black */
    color: #ffffff; /* white */
}

*::-moz-selection {
    /* Gecko Browsers */
    background: #000000; /* black */
    color: #ffffff; /* white */
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 3

正如我在separate answer中提到的，您可以使用的最接近的值是0.996。

此外，为img::selection设置较低的不透明度，以便在Chrome中图像不会被完全遮挡。

像这样：

::-moz-selection { background: rgba(255, 127, 127, 1); }
::selection { background: rgba(255, 127, 127, 0.996); }
img::selection { background: rgba(255, 127, 127, 0.8); }

CSS选择颜色在Chrome上表现奇怪

3 个答案: