CSS3 ::选择在FF&铬 [英] CSS3 ::selection behaves differently in FF & Chrome

问题描述

我正在尝试CSS3中的 :: selection 伪元素。在Firefox它工作和看起来不错。我的网站有深蓝色的蓝色背景。

I'm experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background.

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

I set the selection so that it looks like this in FF.

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

But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transparent the resultant color is nasty.

有人知道是否可以使Chrome的行为与Firefox相同。

Does anyone know if it's possible to get chrome to behave the same as Firefox.

这里是我的css：

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

感谢

推荐答案

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

For some reason Chrome forces it to be semi-transparent. However, you can get around this by setting the background using rgba. I have set the alpha value to be just 0.01 less than 1. Live example: 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;
}

这篇关于CSS3 ::选择在FF&铬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！