CSS3 ::selection 在 FF 和 Chrome 中的行为不同答案

【问题标题】：CSS3 ::selection behaves differently in FF & ChromeCSS3 ::selection 在 FF 和 Chrome 中的行为不同
【发布时间】：2011-11-05 16:04:37
【问题描述】：

我正在试验 CSS3 中的 ::selection 伪元素。在 Firefox 中它可以工作并且看起来很棒。我的网站有深蓝色背景。

我设置了选择，使它在 FF 中看起来像这样。

但在 chrome 中，相同的测试看起来像这样。似乎 chrome 将选择解释为半透明，结果颜色很讨厌。

有谁知道是否可以让 chrome 的行为与 Firefox 相同。

这里是我的 css 供参考：

p::-moz-selection { background:#FFFF7D; color:#032764; }
p::-webkit-selection { background:#FFFF7D; color:#032764; }
p::selection { background:#FFFF7D; color:#032764; }

谢谢

【问题讨论】：

有趣的是，他们从官方规范中删除了它，但浏览器供应商在实现它方面做得非常出色。好吧，除了 Chrome。

标签： css pseudo-element

【解决方案1】：

由于某种原因，Chrome 强制它是半透明的。但是，您可以通过使用 rgba 设置 background 来解决此问题。我已将 alpha 值设置为仅比 1 小 0.01。现场示例：http://jsfiddle.net/tw16/m8End/

p::-moz-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::-webkit-selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}
p::selection {
    background:rgba(255, 255, 125, 0.99);
    color:#032764;
}

【讨论】：

太棒了！至少这是一个简单的修复。
"出于某种原因" 因为不规范，所以任何浏览器都有权翻转 ;)
@boltclock：同意！你只需要确保你把它拍在手腕上并告诉它不要再这样做了！
奇怪的是，例如将 alpha 设置为 0.999 会使其以错误的方式进行操作。我们是否尝试将值设置为等于255/256？
@Drops 不，你需要将它们分开 :-) 如果选择器的一个元素他们不理解，浏览器会忽略整个块。

【解决方案2】：

作为Steven Lu has pointed out 对tw16's answer 的评论，不透明度阈值为255/256。

换句话说，0.996 可以工作，但0.997 不行。

让我们看看它的实际效果：

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

::-moz-selection
{
  background: #F80;
  color: white;
}

<p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. They are often called a housecat when kept as an indoor pet, or simply a cat when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship.</p>
    <img src="http://placekitten.com/g/75/300">
    <img src="http://placekitten.com/g/300/300">
    <img src="http://placekitten.com/g/150/300">
<p>A Melvin, Michigan woman was brutally attacked by a stray cat and shocking footage of the mauling has already gained a million views on YouTube.</p>
<p>The woman, who identified herself to reporters only as Maxx, endured the horrific attack November 30 but only recently realized it had been caught on her home surveillance camera.</p>
<p>The attack left her face swollen and infected and the cat named Buddy dead as officials were forced to test it for rabies.</p>

正如您在 Chrome 中看到的那样，这会使图像变得模糊。为了解决这个问题，我们需要将特定样式应用于图像选择，并降低不透明度：

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

::-moz-selection
{
  background: #F80;
  color: white;
}

img::selection
{
  background: rgba(255, 127, 0, 0.8);
  color: white;
}

<p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. They are often called a housecat when kept as an indoor pet, or simply a cat when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship.</p>
    <img src="http://placekitten.com/g/75/300">
    <img src="http://placekitten.com/g/300/300">
    <img src="http://placekitten.com/g/150/300">
<p>A Melvin, Michigan woman was brutally attacked by a stray cat and shocking footage of the mauling has already gained a million views on YouTube.</p>
<p>The woman, who identified herself to reporters only as Maxx, endured the horrific attack November 30 but only recently realized it had been caught on her home surveillance camera.</p>
<p>The attack left her face swollen and infected and the cat named Buddy dead as officials were forced to test it for rabies.</p>

在 Firefox 中，似乎无法覆盖图像上的蓝色选择颜色。

【讨论】：