CSSデザインカタログ » others » 背景のようにテキストを入れる : h910-s
サンプル
Information おすすめ情報
ソース
XHTML
<h3 class="h910-s"><span>Information </span>おすすめ情報</h3>
CSS
h3.h910-s {
position: relative;
margin: 1em 0 0.5em;
width: 18em;
height: 2em;
overflow: hidden;
border: solid 1px #CCC;
padding: 0.2em 0.5em;
font-size: 150%;
font-weight: bolder;
color: #000;
}
h3.h910-s span {
display: block;
position: absolute;
bottom: -0.4em;
right: 0;
z-index: -1;
font-family: "Arial Black" sans-serif;
font-size: 250%;
color: #FFE5F7;
}

解説
z-indexプロパティでspan要素内のテキストを下に入れ込むようにしています。position: relative;を,調節する要素にposition: absolute;を指定します。どちらもブロックレベル要素でなければならないのでインライン要素のspanはdisplay: block;でブロック化します。(bottom,right)font-familyに"Arial Black"を指定しています。Arial Blackがインストールされていない場合ものあるのでsans-serifを必ず併記します。