#loremipsum {
    width: 222px;
    height: 59px;
    position: relative;
    background: #ffffb7;
}
#loremipsum span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#loremipsum span.label {
    z-index: -1;
}
#loremipsum span.img {
    background: url('lorem-ipsum.png') no-repeat;
}


<h1 id="loremipsum">
    <span class="label">Lorem ipsum</span>
    <span class="img"></span>
</h1>

Listing 37.4. Kod HTML efektu FIR stosującego przezroczyste obrazy PNG

Rozdział 37. FIR — wymiana obrazów na teksty