Изображение за текстом

Question

Я хочу отобразить изображение за тегом H1, я также хочу, чтобы ширина изображения растянулась до той же ширины, что и текст.

Мой код:

<div style="display: inline;"> 
    <img src="http://img585.imageshack.us/img585/3989/m744.png" width="100%" height="68" /> 
    <h1 style="position: absolute; top: 0px;">Variable length text</h1> 
</div> 

JSFiddle: http://jsfiddle.net/Aykng/

Текущий вид:

Желаемая Внешний вид:

Ширина изображения должна либо растягиваться или сжиматься, чтобы заполнить DIV, как я могу добиться этого?

Я хочу, чтобы он был совместим с IE 7+, иначе я бы просто использовал background-image и background-size.

Answer 1

Это может быть легко сделано с некоторыми основными позиционировании добавил

DEMO jsFiddle

div { 
    position: relative; 
} 
h1 { 
    display: inline; 
} 
img { 
    position:absolute; 
    width:100%; 
    max-width: 100%; 
} 

Answer 2

использование:

display: inline-block; 

на сОн CSS.

и поместите изображение в качестве фонового изображения div.

Answer 3

это похоже на работу (в том числе в IE8):

ДИВ будет столь же большим, как <h1> (текст не по центру в настоящее время из-за его краями, вы должны изменили тем, чтобы сделать его пригодным

!

<div style="display: inline-block;position:relative;"> 
    <h1 style="position:relative;z-index:2;top:0px;">Variable length text</h1> 
    <img src="http://img585.imageshack.us/img585/3989/m744.png" style="position:absolute;top:0px;left:0px;width:100%;height:68px;z-index:1" /> 
</div> 

http://jsfiddle.net/Aykng/9/

Answer 4

Вот еще один способ сделать это без использования display: inline-block и IE7 взломать:

<div class="parent"> 
    <img src="http://img585.imageshack.us/img585/3989/m744.png" 
     width="100%" height="68" /> 
    <h1>Variable length text</h1> 
</div> 

с CSS:

.parent { 
    display: inline; 
    position: relative; 
} 
.parent img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.parent h1 { 
    display: inline; 
    position: relative; /* this makes sure the h1 is in 
          front of img in stacking order */ 
    border: 1px dotted lightgray; 
    padding: 0 10px; /* optional, tweak left/right as needed */ 
    vertical-align: top; 
    line-height: 68px; 
} 

Demo скрипка: http://jsfiddle.net/audetwebdesign/BfMDJ/

Это идентично более ранним решением по Vector кроме как обрабатываются высота изображения.

Я решил установить высоту линии для h1 в соответствии с фоновым изображением (68px в этом примере), а затем применить vertical-align: top. Это облегчает вертикальное выравнивание текста, если вы этого желаете.

Потенциальный выпуск

Если вы установите ширину изображения на 100% и установить высоту, то изображение будет искажаться. Вам нужно будет указать что-то о фоновом изображении и как вы хотите, чтобы текст был центрирован по вертикали, если вы хотите получить более надежный ответ.

Answer 5

Вы можете использовать следующий код. Он будет работать во всех браузерах, включая IE 7.

<div style="display: inline-block;background: url('http://img585.imageshack.us/img585/3989/m744.png') repeat; *display:inline;*zoom:1;"> 
    <h1>Variable length text</h1> 
</div>