테두리 이미지 위에 텍스트 : 확장 가능한 배경으로 테두리 사용

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