jquery - テキストの無地の背景色

Question

CSS3 または jQuery でこの効果を作成することは可能ですか?

Answer 1

これは実際には表示上の問題であるため、ユーザーとプログレッシブ エンハンスメントのために、これは JavaScript ではなく CSS で処理する方が適切です。

text-stroke宣言を行うことができます。残念ながら、今のところ WebKit のみです。

-webkit-text-stroke:2px white;

さらに、特定の例では、ストロークをテキストの外側に揃える必要がありますが、これは現在不可能です。

CSS-Tricksから:

外側のテキスト ストロークの配置のみが、私にはまったく適切に見えます。変更不可能なデフォルトが中央にあるのは、CSS と Illustrator の両方にとって残念なことです。

この効果を達成するために、いつでも宣言をあらゆる方向に積み重ねることができます。text-shadowこれはテキスト ストロークよりも少し面倒ですが、ブラウザーのサポートは (今のところ) 優れています。

text-shadow:  0 1px 0 white, 0 2px 0 white,
              1px 0 0 white, 2px 0 0 white,
              -1px 0 0 white, -2px 0 0 white,
              0px -1px 0 white, 0 -2px 0 white;

Answer 2

はい、text-shadow を使えば可能です。このような：

.MyDiv{
 background:green;
 padding:20px 20px;
 color:black;
 text-shadow:0px 0px 3px white, 
                0px 0px 4px white, 
                0px 0px 5px white,
                0px 0px 6px white, 
                0px 0px 7px white,
                0px 0px 8px white, 
                0px 0px 9px white,
                1px 1px 2px white, 
                1px 1px 3px white,
                -1px -1px 2px white, 
                -1px -1px 3px white,
                -2px -2px 2px white,
                -2px -2px 3px white;}​

ここにデモがあります。効果を強化するために定義を追加し続けることができます。

Answer 3

CSS3で可能です：

#element {
    color: red;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

デモ