当我在一个黑底浅色文本的网站上工作时,我注意到所选文本在Firefox中看起来很糟糕。我想通过用CSS改变文本选择颜色来解决这个问题。不,不,不要停止阅读这里并关闭它作为复制品!!堆栈溢出可以做得更好,好吗?请阅读整个问题,然后将其作为“如何使用CSS更改文本选择颜色”的副本关闭
可以使用
::selection
选择器。然而,这种方法似乎有一些有趣的边缘案例,我直到最近才意识到。例如,如果我指定所选的背景应该是蓝色(#0000ff),浏览器会将其解释为“使其看起来与#0000ff没有太大区别的蓝色”。
如果您在Chrome、Safari和Firefox中运行此代码,并且选择文本,您将得到3种不同的外观(或者至少,我得到了3种不同的外观)。另外,对于Safari和Chrome来说,100%的不透明度会悄悄地改变为75%的不透明度,所以99,6%是它能得到的最不透明的。
<html>
<head>
<style>
body {
background-color: black;
color: white;
font-size: 18pt;
}
#p1::selection {
background-color: rgba(0,0,255,0.99);
color: black;
}
#p2::selection {
background-color: rgba(0,0,255,1.0);
color: black;
}
#blue {
background-color: rgba(0,0,255,1.0);
color: black;
}
</style>
<title>::selection</title>
</head>
<body>
<p id="p1">
P1: selection with opacity 99%
</p>
<p id="p2">
P2: selection with opacity 100%
</p>
<p id="blue">This is the color your browser considers to be #0000FF</p>
<p>
Your browser is: <script>document.write(navigator.userAgent)</script>
</p>
</body>
</html>
我做错了吗?而且,在我的Macbook Air上
不
但是支持P3颜色空间(btw),Firefox和Safari不同意内置的“数字色度计”应用程序,尽管我将其设置为显示sRGB值。有没有一种健壮的方法可以改变选择的背景颜色,这在不同浏览器之间是一致的?
*分歧并不微妙,更像是255对204。
