Html 边框图像顶部的文本：将边框用作可展开的背景

我正在尝试为一些文本创建一个可扩展的背景图像。border image属性几乎完全满足了我的需要。问题是我并不真的想要一个边框，更多的是边框成为内容的背景（特别是我喜欢固定分辨率的边和拉伸中心）。将“高度”设置为零可以提供我想要的确切背景，但不幸的是，文本被放置在中心以下：

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

编辑：对于firefox

border:solid 149px


将文本向后移动的最简单方法是什么
有没有一种简单的方法可以将负偏移添加到宽度中以引入边界边
这是一个很好的例子，我相信负填充将提供一个完美的解决方案

我知道还有很多其他方法可以达到同样的效果（例如标准背景图像和两侧的两个元素），但我想要的是一些小而简单的东西。
您可以使用线条高度：


您可以使用线条高度：


美好的你知道我怎样才能减少内容的宽度或增加边框的宽度吗？很抱歉，我不明白你在问什么。文本左右的边框太宽了。理想情况下，我希望能够定位文本，使其几乎填满整个背景。目前，左/右边框从文本的边缘开始，我希望文本能够与水平边框重叠（就像当前与垂直边框重叠一样）。这一次我不能将宽度设置为零，因为我希望标签在添加更多文本时展开。无论如何，谢谢。我想我可以试着把文本放在一个带有负边距的子标签中。很好！你知道我怎样才能减少内容的宽度或增加边框的宽度吗？很抱歉，我不明白你在问什么。文本左右的边框太宽了。理想情况下，我希望能够定位文本，使其几乎填满整个背景。目前，左/右边框从文本的边缘开始，我希望文本能够与水平边框重叠（就像当前与垂直边框重叠一样）。这一次我不能将宽度设置为零，因为我希望标签在添加更多文本时展开。无论如何，谢谢。我想我可以试着把文本放在一个带有负边距的子标记中。
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;
}