在FF和Chrome中,CSS3 :: selection的行为有所不同

Question

我正在试验::selectionCSS3中的伪元素.在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; }

谢谢

Answer 1

出于某种原因,Chrome强制它是半透明的.但是,您可以通过设置background使用rgba 来解决这个问题.我将alpha值设置为仅比0.01小1.实例: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;
}

Answer 2

正如Steven Lu在对tw16的答案的评论中指出的那样,不透明度阈值是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中,似乎没有办法覆盖图像上的蓝色选择颜色.