Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

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>