31

::selectionCSS3の疑似要素を試しています。Firefoxでは動作し、見栄えがします。私のサイトの背景は濃紺です。

FFではこんな感じになるように選択しました。

ここに画像の説明を入力してください

しかし、クロムでは、同じテストは次のようになります。クロムは選択を半透明として解釈し、結果の色は厄介なようです。

ここに画像の説明を入力してください

ChromeをFirefoxと同じように動作させることが可能かどうか誰かが知っていますか？

参考までに、ここに私のcssがあります：

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

ありがとう

4

2 に答える 2

47

何らかの理由で、Chromeはそれを半透明に強制します。ただし、background使用するrgbaを設定することで、これを回避できます。アルファ値を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;
}
于 2011-08-28T23:08:54.897 に答える
9

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では、画像の青い選択色を上書きする方法はないようです。

于 2015-04-02T13:16:06.227 に答える