CSS だけで背景画像置換を行う 4 つの方法 のサンプル | Greensleeves

text-indent: -9999px を使う方法

<p class="text-indent">text-indent でを使うよ。</p>

p.text-indent {
   width: 300px;
   height: 85px;
   text-indent: -9999px;
   background: url(img/logo.png) no-repeat left top;
}

z-index を使う方法

<p class="z-index"><span>z-index を使うよ。</span></p>

p.z-index {
   width: 300px;
   height: 85px;
   background: url(img/logo.png) no-repeat left top;
}

p.z-index span {
   position: absolute;
   z-index: -1;
}

span と z-index を使う方法

<p class="span_and_z-index"><span></span>span と z-index を使うよ。</p>

p.span_and_z-index {
   position: relative;
   width: 300px;
   height: 85px;
}

p.span_and_z-index span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   background: transparent url(img/logo.png) no-repeat left top;
}