为什么使用相同的十六进制值在不同的浏览器中得到不同的颜色？ [复制]答案

【问题标题】：Why am I getting different colors in different browsers using the same hexadecimal value? [duplicate]为什么使用相同的十六进制值在不同的浏览器中得到不同的颜色？ [复制]
【发布时间】：2018-10-27 22:25:11
【问题描述】：

我在我的 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;
}

&lt;p&gt;Some text to select&lt;/p&gt;

【问题讨论】：

请在您的回答中创建一个最小、具体且可验证的示例（如代码 sn-p）：仅根据屏幕截图，很难看出是否有任何其他样式影响颜色。
不要发布代码的照片，而是代码本身。
使用提供的代码（这可能太少而无法证明问题）我看不到您的屏幕截图中显示的问题的证据。文本颜色似乎与 Chrome 中的选择背景颜色完美匹配。屏幕截图表明，选择颜色可能有轻微的透明度，从而使一些浅蓝色背景可以透过。
嘿！我和你的 WorlderZee 看到的一样！这是因为 Chrome 对其应用了 alpha/opacity。让我看看我们是否可以改变它..
我在演示 sn-p 中添加了浅蓝色背景，这是我根据您提供的屏幕截图估计的，果然，问题很明显。这就是为什么我们要求您始终提供您当前正在使用的代码的Minimal, Complete, and Verifiable Example。我假设 Chrome 的选择看起来有点透明是正确的。现在问题更完整了，希望您能得到有用的答案。

标签： html css

【解决方案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;
}

&lt;p&gt;Some text to select&lt;/p&gt;

【讨论】：

这似乎是一个试图通过将::selection background-color 设置为与元素相同的color 来避免无法访问文本的功能
developer.mozilla.org/en-US/docs/Web/CSS/… 。奇怪的是 Firefox 不会实现相同的功能？
@ksav Firefox（显然）允许您覆盖默认的半透明颜色，而 Chrome 不允许。

【解决方案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;
}

&lt;p&gt;Some text to select&lt;/p&gt;

【讨论】：