8

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

正如在这个 jsFiddle中看到的，文本在被选中时应该具有完全黑色的背景颜色。在 Firefox 上，就是这种情况。

但是，在 Chrome 上，颜色并不是绝对的黑色。Chrome 似乎在摆弄我的颜色。

如果您在选择 : 时将文本保留为黑色，则可以看到这一点，在 Firefox 上，它变得不可见，而在 Chrome 上您仍然可以看到它。

我注意到我使用的其他背景颜色有这种效果：它们在 Chrome 上总是有点偏离。在我看来，添加了一点红色。

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

4

3 回答 3

13

可能是为了防止您正在尝试做的事情，如果 Chrome 为 1，Chrome 似乎会更改选择的背景颜色的不透明度。您可以通过将不透明度设置为非常接近 1 来欺骗这一点，例如 ( background-color: rgba(0,0,0,.99).

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

于 2013-02-20T01:49:04.330 回答
3

当您使用上面的建议时， 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;
}
于 2016-03-08T09:59:49.027 回答
1

正如我在单独的答案中提到的，您可以使用的最接近的值是 about 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); }
于 2015-04-02T15:29:47.310 回答