Question

在网站上使用深色背景上的浅色文字的同时，我注意到所选文字在Firefox中看起来很糟糕。我想通过使用CSS更改文本选择颜色来修复它。不，不，不要在这里停止阅读并将其作为重复内容关闭！！堆栈溢出可以做得更好，好吗？在关闭此内容之前，请先阅读完整的问题，以重复“如何使用CSS更改文本选择颜色？”

可以使用::selection选择器来更改HTML页面中所选文本的背景颜色。但是，这种方法似乎有一些有趣的极端情况，直到最近我才意识到。例如，如果我指定所选背景应为蓝色（＃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色彩空间，顺便说一句）上，Firefox和Safari对* 0000ff的外观表示了不同意见*，并且两个浏览器都不同意* “数字色度计”应用程序，即使我将其设置为显示sRGB值。是否有一种健壮的方法来更改选择背景颜色，这在不同的浏览器之间是一致的？

*分歧并非微妙，更像是255对204。

准确更改文本选择颜色的可靠方法吗？

0 个答案: