CSS文本重叠

Question

如何能够做到像this

他们似乎并不奏效。

Answer 1

小提琴：http://jsfiddle.net/UuEJ2/。

HTML：

<h1>Sample Text</h1> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 10px; 
} 

h1 { 
    display: inline-block; 
    font: bold 48px/1 Sans-Serif; 
    background-color: #5e5e5e; 
    padding: 10px 20px 0 20px; 
    color: #eee; 
    overflow: hidden; 
    height: 40px; 
} 

Answer 2

使用height属性，并使用em值可以实现愿望的效果。现在，如果您增加字体大小，效果仍然相同。检查DEMO。

CSS

h1{background:gold; height:.9em;font-size:5em;color:white;overflow: hidden;} 

HTML文本

<h1>Sample Text</h1>