CSS3:: выбор ведет себя по-разному в FF и Chrome
Я экспериментирую с псевдоэлементом ::selection
в CSS3. В Firefox это работает и отлично выглядит. Мой сайт имеет темный темно-синий фон.
Я устанавливаю выделение так, чтобы оно выглядело так в FF.
![enter image description here]()
Но в хром тот же тест выглядит так. Кажется, что хром интерпретирует выбор как полупрозрачный, получившийся цвет неприятен.
![enter image description here]()
Кто-нибудь знает, можно ли заставить хром вести себя так же, как Firefox.
Для справки здесь мой css:
p::-moz-selection { background:#FFFF7D; color:#032764; }
p::-webkit-selection { background:#FFFF7D; color:#032764; }
p::selection { background:#FFFF7D; color:#032764; }
Спасибо
Ответы
Ответ 1
По какой-то причине Chrome заставляет его быть полупрозрачным. Однако вы можете обойти это, установив background
с помощью rgba. Я установил значение альфа-значения всего на 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;
}
Ответ 2
Как Стивен Лу указал в комментарии к tw16 answer, opacity treshold 255/256
.
![calc]()
Другими словами, 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>