2015-07-22   css 

CSSのtext-shadowを使って画像の上の文字を縁取りして見やすくする

HTML

<div class="background-banner">
  <h2>バナー表示をするテスト</h2>
</div>

CSS

div.background-banner h2 {
    background-image: url(background.jpg);
    text-shadow:
     3px  3px 6px #ffffff,
    -3px  3px 6px #ffffff,
     3px -3px 6px #ffffff,
    -3px -3px 6px #ffffff;
}

結果

参照

関連

 2015-07-22   css