PNG-градиенты и слои

[gridbyte]

Приветствую.

Подскажите, пожалуйста, в общих чертах, как реализовать следующую вещь.

Есть страница, с чёрным фоном. Требуется в центре отобразить картинку, заранее неизвестно, каких размеров (предположим, PHP рандомно генерирует адрес из каких-то существующих вариантов, поэтому привязываться к размеру не хочется).

Причём картинку хочется отобразить не просто так, а с дивами, использующими градиентный полупрозрачный PNG (два используют PNG с горизонтальным направлением градиента, а два других - с вертикальным. Как здесь, В общем:

Пытался сделать 4 дива, каждый следующий - вложен в предыдущий, а в конце внутри - картинка. Каждый див бэкграудом имеет PNG-шки. Не получается. Картинка в центре перекрывает их всех, и выставление z-index'ов не помогает.

Подскажите, как корректно это делать? Я не прошу делать это за меня, а в двух словах намекнуть, как это лучше сделать. Может, я совсем неправильно делаю.

Заранее спасибо

[psywalker]

Я тебе бы посоветовал сделать картинку-пнг, у которой будут места для повторения, т.е. по середине.

И сделать потом, как тут, например рамка http://psywalker.ru/SAITS/Leonardo%20da%20Vinci/gallery-page1.html#

Тебе даже полегче будет, у тебя там фон чёрный и т.д.

[gridbyte]

  On 11/1/2011 at 8:27 PM, psywalker said:

Я тебе бы посоветовал сделать картинку-пнг, у которой будут места для повторения, т.е. по середине.

Ммм, поясни, плиз?

[Switch74]

<div width height center>

<img width height absolute z-index>

<img width height>

</div>

Объясняю свою не понятную идею :

т.к. твоя картинка получается через PHP можно узнать её размеры и выставить их для наших объектов жестко (width, height)

первый img - это png c прозрачным центром и плавно переходящим в чёрное к краям, она у нас абсолютная и слоем выше, чтобы накрыть вторую картинку

второй img - это сама картинка

зная размеры обёртки (div) мы можем его выровнять и по горизонтали и по вертикали через top left margin

первый img можно разбить на четыре картинки, как ты и хотел, и при желании сделать через div background

так же наложение градиента можно повесить на javascript - это получится наверно более красивой и удобной реализацией

[gridbyte]

Вроде всё понял кроме вот этого:

  On 11/1/2011 at 9:12 PM, Switch74 said:

первый img можно разбить на четыре картинки, как ты и хотел, и при желании сделать через div background

Зачем разбивать(ведь можно и вправду сделать картинку с PNG-маской) и если разбивать, то как делать через div background?

[Softlink]

Можно так попробовать сделать http://forum.htmlbook.ru/index.php?showtopic=30280 С тенями. Будет все тянуться. Картинки можно генерить и не задумываться.

[Justnewone]

Браузеры пока не умеют с картинками кроссбраузерно работать кроме как ресайзить и уголки отрезать (впрочем, тоже весьма некроссбраузерно). Маски никакие он не положит.

[SelenIT]

Новые браузеры умеют рисовать box-shadow:inset..., им картинка вообще не нужна, имхо. А для старых IE действительно можно сделать одну картинку-рамку (из фонового цвета по краям в полную прозрачность в центре) и положить ее поверх целевой картинки через filter:alphaImageLoader с параметром <чего-то там> scale...