Как отцентрировать картинку?

Nex Moderator • 09.04.2010 05:22 • 11 comments • 15546 views

Logger:

Еще вопрос - хочется отцентрировать картинку. Для Аэры сработал такой способ
*P '<div style="text-align:center;"><img src="/nex/ivan/photo_1.jpg"/></div><br/>'
Но в обычном QSP 5.65 картинка остается прижатой слева.

Edited at 09.04.2010 06:38 (15 years ago)

Byte Admin 09.04.2010 06:35 (15 years ago)

Можно тег картинки заключить в тег <center> - он работает и на Аэре, и на обычном.

Logger #15 09.04.2010 14:07 (15 years ago)

Спасибо. Тогда нужно подправить документацию к Аэре, там этот тег не заявлен http://qsp.su/misc/aero/qsp.txt

Еще вопрос - а как можно наложить одну картинку на другую? Спрайт героя на картинку-фон.

Byte Admin 09.04.2010 15:46 (15 years ago)

Например

<div style="background-image:image.png"><img src="hero.png" /></div>

Можно внутри div’а сделать еще несколько div’ов, у которых будут свои картинки на фоне и т.д. - любое число слоев.

Byte Admin 09.04.2010 15:47 (15 years ago)

Поддерживается абсолютное позиционирование, например:

<div style="background-image:image.png"><img style="position:absolute;left:100;top:100" src="/nex/hero.png" /></div>

Logger #15 14.04.2010 03:55 (15 years ago)

Byte:

Поддерживается абсолютное позиционирование

Увы-увы…что-то мне не удалось наложить картинки.

Такой вариант не показывает фоновую картинку

*P '<div style="background-image:ivan/guslars.jpg"><img style="position:absolute;left:100;top:50" src="/ivan/face-grin.png"/></div>'

А такой - показывает картинки рядом, а не слоями

*P '<div style="background-image:ivan/guslars.jpg;"><img style="position:absolute;left:0;top:0;" src="/ivan/guslars.jpg"/><img

На всякий случай - прикладываю исходники.

Sample1.zip
Sample2.zip

Byte Admin 14.04.2010 09:51 (15 years ago)

Нужно явно указать ширину и высоту блока:

*P '<div style="background-image:ivan/guslars.jpg;width:280;height:206"><img style="position:absolute;left:100;top:50" src="ivan/face-grin.png"/></div>'

Byte Admin 14.04.2010 10:02 (15 years ago)

Кстати, не указывая размеры можно проще:

*P '<img src="ivan/guslars.jpg"><img style="position:absolute;left:100;top:50" src="ivan/face-grin.png">'

Здесь выводим картинку, а картинку “рядом” позиционируем абсолютно.

Logger #15 15.04.2010 18:27 (15 years ago)

Нашел причину - это работает только в Аэре. По порядку. Имеем следующий код (скачать тут)

#start
showinput 0
KILLALL
USEHTML=1
CLOSE ALL
*PL 'First'
*PL '<center><div style="background-image:ivan/guslars.jpg;width:280;height:206"><img style="position:absolute;left:100;top:50" src="/ivan/face-grin.png"/></div></center>'
*PL 'Second'
*PL '<center><img src="/ivan/guslars.jpg"><img style="position:absolute;left:100;top:50" src="/ivan/face-grin.png"></center>'
*PL 'Text'
-

На Аэре это выглядит так:
А в обычном QSP (5.6.5) так

То есть, получается, что есть 2 проблемы
1) Аэра по разному отрабатывает абсолютное позиционирование для показа фоновой картинки через div и img
2) Обычный QSP-плеер не поддерживает абс. позиционирование вообще…или я что-то не так сделал.

Byte Admin 15.04.2010 18:59 (15 years ago)

1. Абсолютное позиционирование обрабатывается одинаково, просто родительские контейнеры смещены по-разному в 2х случаях. Абсолютное позиционирование считается по координатам контейнера-родителя.
В первом случае позиционируется относительно div, т.к. img находится в нем.
Во втором случае позиционируется относительно center, т.к. img находится в center.

2. Обычный плеер не поддерживает абсолютное позиционирование.

Logger #15 15.04.2010 20:04 (15 years ago)

Byte:

Обычный плеер не поддерживает абсолютное позиционирование.

Хм…а есть шанс, что он будет поддерживать в неком обозримом будущем. Или что Аэра будет поддерживает звук в этом же обозримом будущем :)

Byte Admin 15.04.2010 20:49 (15 years ago)

Аэра будет поддерживать звук :)