Efekt FIR
wykonany przy użyciu display: none
Przykład
#loremipsum {
background: url('lorem-ipsum.png') no-repeat;
width: 222px;
height: 59px;
}
#loremipsum span {
display: none;
}
<h1 id="loremipsum"><span>Lorem ipsum</span></h1>
wykonany przy użyciu text-indent
Przykład
#loremipsum {
background: url('lorem-ipsum.png') no-repeat;
width: 222px;
height: 59px;
text-indent: -2000em;
}
<h1 id="loremipsum">Lorem ipsum</h1>
wykorzystujący kolejność warstw
Przykład
#loremipsum {
width: 222px;
height: 59px;
position: relative;
}
#loremipsum span {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url('lorem-ipsum.png') no-repeat;
}
<h1 id="loremipsum"><span></span>Lorem ipsum</h1>
stosujący przezroczyste obrazy PNG
Przykład
#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>