Question

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

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

编辑：for firefox border: solid 149px;

http://jsfiddle.net/RL798/

将文本转换回来的最简单方法是什么？
是否有一种简单的方法可以在宽度上添加负偏移以将边框边加入？

这是一个很好的例子，我认为负填充可以提供完美的解决方案。

我知道还有很多其他方法可以达到相同的效果（例如标准的背景图像和两个元素），但我只是做了一些小而简单的事情。

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

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

1 个答案: