html - 为什么我使用相同的十六进制值在不同的浏览器中得到不同的颜色?

标签 html css

<分区>

我使用十六进制值在我的 css 文件中设置选择颜色。问题是,Firefox 和 Chrome 不会从中呈现相同的颜色。

我是否需要指定一些内容以使代码呈现相同?

我尝试使用 -webkit- 但一无所获。十六进制值与我用于文本颜色的值完全相同。从渲染颜色到 JS 动画的所有内容都可以在 Firefox 和 IE 上完美运行,但 Chrome 会做一些奇怪的事情。

在 Chrome 上:

Chrome

在 Firefox 上:

On 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>

最佳答案

我可以在 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>

关于html - 为什么我使用相同的十六进制值在不同的浏览器中得到不同的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53022086/

相关文章:

java - 关于如何在基于 PHP 的门户网站中访问 Java+ Xml 应用程序的说明

jquery - Div 大小取决于单击时从左到右翻译 Angular 的文本

css - 我怎样才能先省略内容的左侧?

javascript - 可以改变引导类的方向吗?

css - ie7 在动态注入(inject)的文本上保留空格

css - Angular MaterializeCSS 重叠标签与输入

jquery - 显示默认图标,如果在 div 上设置了类,则替换图标

html - 如何将两个水平 div 放在一个垂直 div 旁边?

html - CSS:Scale(x) 使图标旋转

javascript - 使用 Javascript 将文本设为斜体