html - 边框图像顶部的文本：使用边框作为可扩展背景

Question

我正在尝试为某些文本创建可扩展的背景图像。border-image 属性几乎完全符合我的要求。问题是我真的不想要边框，更多的是边框成为内容的背景（特别是我喜欢固定分辨率的边缘和拉伸中心）。将高度设置为零给出了我想要的确切背景，不幸的是，文本低于中心：

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

编辑：对于火狐 border: solid 149px;

http://jsfiddle.net/RL798/

1. 将文本向上移动的最简单方法是什么？
2. 有没有一种简单的方法可以为宽度添加负偏移量以将边框边带进来？

这是一个很好的例子，我相信负填充将提供一个完美的解决方案。

我知道还有许多其他方法可以实现相同的结果（例如标准背景图像和两侧的两个元素），但我追求的是小而简单的东西。

Answer 1

您可以使用行高：

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;
}