Прозрачный градиент - Фон не просто прозрачный, есть градиент - к верху он светлеет

[DrStrangeLove]

Есть такой шаблон.

Основной контент находится в слое с прозрачным фоном. Фон не просто прозрачный, есть градиент - к верху он светлеет.

Как сделать такой фон?? Просто вырезать большую фон. картинку??
Или полоску и замостить?? тогда какая должна быть полоска??


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

[Виталий Желтяков]

Полоска должна быть 1*на_сколько_нужно png24

[DrStrangeLove]

Сообщение от Виталий Желтяков

Полоска должна быть 1*на_сколько_нужно png24

т.е. ставить repeat-x??

Для такого макета целесообразно задавать жёстко высоту (на_сколько_нужно)??

[Blondy]

Есть два решения -оба искуственные.

1) Делать в графическом редакторе целиковую подложку с градиентом каким нибудь стандартным размером и потом уже выезжать на CSS свойстве backgroung-repeat: repeat Х (в случае более широкого монитора продолжает заливку по горизонтали ). По вертикали backgroung-repeat не используйте с градиентом ни в коем случае - поплывет сразу полосками. Будьте акуратнее, когла рисуете градиент - дрогнит рука и потом в случае repeat Х у Вас в месте стыка очень четко может проявиться "ступенька".

2) Во втором случае полный градиент не получится, но можно добиться очень эффектной комбинации. В графическом редакторе создается два модуля основной молуль (основной цвет) или непосредственно на сайте создается подходящая фоновая заливка (так естественее выглядеть будет и "весить" поменьше) и к нему растушованные модули градиента (отдельно). И потом всю эту конструкцию собираете с помощью CSS и div (или таблицы - в зависимости от того, в чем верстаете). Присмотритесь к сайтам, там очень часто проблема градиента решается именно вторым способом. К тому же так исчезает проблема подгонки по высоте. Пример - модуль градиента - основной блок (резиновой высоты) - модуль градиента. Основной блок будет подгоняться по высоте под контент основного текста, а на градиент можно свинтить менюшки и т.д.

В качестве примера градиента из двух кусков - применение на сайте
http://www.dreamwire.nl/
Видите, основной блок - заливка в основной цвет градиента, а маленький кусок сверху - градиент. Вкусно смотриться, не так ли?))))

Присмотревшись в Photoshop к Вашему шаблону стало ясно, что все, вероятно, решено с помощью свойства CSS opasity. Прямо видно как через основной блок проступает фотография-подложка.
Как сказано в справочнике www.htmlbook.ru это свойство определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Если Вы помните откуда Вы взяли этот образец, попробуйте на этом сайте почитать кодировку этой работы для CSS.

Возможно, все это решено и при помощи Java, но я в ней вообще пас....

Попробуйте поиграть с opasity