いくつかの暗い領域と明るい領域がある動的にサイズ設定された背景画像を持つレスポンシブ サイトがあります。ブラウザでは、フォントの色は背景画像の色に対して適切なコントラストを持つように調整されています。
残念ながら、レスポンシブ (モバイル) デザインでは、サイズ変更された背景画像の暗い部分にテキストが重ねられ、テキストが非常に読みにくくなる場合があります。テキストがその背後にある背景を認識し、それに応じてスタイル/色を変更できるjQueryプラグインまたはテクニックを知っている人はいますか?
いくつかの暗い領域と明るい領域がある動的にサイズ設定された背景画像を持つレスポンシブ サイトがあります。ブラウザでは、フォントの色は背景画像の色に対して適切なコントラストを持つように調整されています。
残念ながら、レスポンシブ (モバイル) デザインでは、サイズ変更された背景画像の暗い部分にテキストが重ねられ、テキストが非常に読みにくくなる場合があります。テキストがその背後にある背景を認識し、それに応じてスタイル/色を変更できるjQueryプラグインまたはテクニックを知っている人はいますか?
text-shadow を使用して、テキストの端をマークできます。
body {
/* your rules */
color: rgba(0 , 0, 0, 0.8 ); /* just a guess that it might be black;*/
text-shadow:
0 0 1px gold,
0 0 3px white; /* choose how many and which colors */
}
それが考え方です
あなたが求めていることは、基本的にこれを伴います:
<span>
より良い言葉がないため、しないでください。それはばかげており、合理化するにはオーバーヘッドが多すぎます。
テキストのコンテナーに半透明の背景を与えて、より目立つようにしてみませんか?
.Container {
background-color:rgba(0,0,0,0.5);
}
これにより、ページに画像全体が表示されるようにしながら、テキストが画像に対してポップするための明るい色合いが提供されます。
text-shadow ソリューションも良いアイデアですが、IE9 では動作しないことに注意してください。私のソリューションはIE9では機能しますが、IE8では機能しません。これは、より良いという意味ではなく、覚えておくべきことです。