邊框圖像上方的文本：使用邊框作為可擴展背景

Question

我正在嘗試為某些文本創建可擴展的背景圖像。 border-image屬性幾乎可以滿足我的需求。 問題是我真的不想要邊框，更不用說邊框成為內容的背景了（特別是我喜歡固定分辨率的邊緣和拉伸中心）。 將height設置為零會給出我想要的確切背景，不幸的是，該文本被放到了中心以下：

height: 0px;
display: inline-block;
font-size: 100pt;
border: 149px;
border-image: url('img.png') 149 149 stretch;

編輯：對於Firefox border: solid 149px;

http://jsfiddle.net/RL798/

1. 將文字移回最簡單的方法是什么？
2. 是否有一種簡單的方法可以在寬度上添加負偏移以引入邊框？

這是一個很好的例子，我相信負填充將提供一個完美的解決方案。

我知道還有很多其他方法可以達到相同的結果（例如，標准背景圖像和兩側的兩個元素），但是我追求的是小而簡單的方法。

Answer 1

您可以使用line-height：

http://jsfiddle.net/jonigiuro/RL798/4/

div {
    height: 0px;
    display: inline-block;
    font-size: 100pt;
    border: 149px;
    border-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Button_Icon_GreenBlue.svg/300px-Button_Icon_GreenBlue.svg.png') 149 149 stretch;
    line-height: 20px;
}