letter-spacing负值/first-letter伪类与按钮文字隐藏实例页面

回到相关文章 »

代码:

CSS代码:
.btn {
    display: inline-block;
    width: 52px; height: 25px;
    border: 0;
    background: #f0f0f0 url(/study/image/flash_copy_btn.png);
    letter-spacing: -3em;
    overflow: hidden;
}
.btn:first-letter {
    margin-left: -20em;
}
.img {
    width: 275px; height: 102px;
    margin-top: 0;
    background: #34538b url(/study/image/zxx_cavity.png);
    font-size: 60px;
    letter-spacing: -2em;
    overflow: hidden;
}
.img:first-letter {
    margin-left: -20em;
}
                
HTML代码:
<p>
    <strong>a标签按钮</strong><br />
    <a href="##" class="btn">我是文字</a>
</p>                    
<p>
    <strong>本身按钮</strong><br />
    <button class="btn">我是文字</button>
</p>
<p>
    <strong>大尺寸背景图</strong><br />
    <h2 class="img">张鑫旭</h2>
</p>
                

效果:

a标签按钮
我是文字

本身按钮

大尺寸背景图

张鑫旭