为什么在不同的浏览器中使用相同的十六进制值获得不同的颜色？

Question

我使用十六进制值在CSS文件中设置选择颜色。事实是，Firefox和Chrome无法从中呈现相同的颜色。

我需要指定一些内容来使代码呈现相同的内容吗？

我尝试使用-webkit-，但一无所获。十六进制值与我用于文本颜色的值完全相同。从渲染颜色到JS动画，所有内容都可以与Firefox和IE完美配合，但是Chrome确实很奇怪。

在Chrome上：

在Firefox上：

::selection {
  background: #f997f1;
}

::-webkit-selection {
  background: #f997f1;
}

::-moz-selection {
  background: #f997f1;
}

body {
  background: lightblue;
}

p {
  font-family: sans-serif;
  font-size: 2em;
  color: #f997f1;
}

<p>Some text to select</p>

Answer 1

我可以在Chrome中复制它。看起来是因为选择不是完全不透明。如果设置了背景图片，则可以看到它照进来。这也意味着蓝色背景颜色会发光，从而影​​响所选内容的整体颜色。

我（尚未）无法找到导致此问题的确切原因以及如何进行更改。不透明度不起作用。颜色是正常的rgb ...无论如何，可以在这里找到原因的证明。

::selection {
  background: #f997f1;
}

::-webkit-selection {
  background: #f997f1;
}

::-moz-selection {
  background: #f997f1;
}

body {
  background: lightblue;
  background-image: url(https://www.google.nl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)
}

p {
  font-family: sans-serif;
  font-size: 2em;
  color: #f997f1;
}

<p>Some text to select</p>

Answer 2

这是一个解决方案；问题是Firefox不应用Alpha，而Chrome应用，因此您需要像这样：

::selection {
  background: rgba(249,151,241,.6);
}

::-webkit-selection {
  background: rgba(249,151,241,.6);
}

::-moz-selection {
  background: rgba(249,151,241,.6);
}

body {
  background: lightblue;
}

p {
  font-family: sans-serif;
  font-size: 2em;
  color: #f997f1;
}

<p>Some text to select</p>