CSS3 :: выбор ведет себя по-разному в FF & Chrome - PullRequest
Новая
       7

CSS3 :: выбор ведет себя по-разному в FF & Chrome

25 голосов
/ 29 августа 2011

Я экспериментирую с псевдоэлементом ::selection в CSS3.В Firefox это работает и выглядит великолепно.У моего сайта темно-синий фон.

Я установил выделение так, чтобы оно выглядело так в FF.

enter image description here

Но в Chrome выглядит тот же тесткак это.Похоже, что Chrome интерпретирует выделение как полупрозрачный, результирующий цвет неприятен.

enter image description here

Кто-нибудь знает, возможно ли заставить Chrome вести себя так же, как Firefox.

Для справки вот мой css: 

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

Спасибо

Ответы [ 2 ]

40 голосов
/ 29 августа 2011

По какой-то причине 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;
}
7 голосов
/ 02 апреля 2015

Поскольку Стивен Лу указал в комментарии к tw16 , порог непрозрачности равен 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>

Как вы можете видеть в 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 нет способа переопределить синий цвет выделения на изображениях.

...