Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как растянуть градиентный фон по всей высоте страницы?
 
 автор: Blaster   (30.06.2008 в 18:12)   письмо автору
 
 

Собственно, сабж.

   
 
 автор: AlexSol   (30.06.2008 в 18:49)   письмо автору
 
   для: Blaster   (30.06.2008 в 18:12)
 

собственно никак

   
 
 автор: Blaster   (30.06.2008 в 19:42)   письмо автору
 
   для: AlexSol   (30.06.2008 в 18:49)
 

Собственно, Вы не правы.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#fffe98', endColorStr='#e6903b', gradientType='0');">

;)
Но такой способ только в IE работает вроде... может всетаки есть другие решения?

Еще один способ придумал: создать картинку с градиентом и присвоить ей следующий style:
position:absolute; top:0; left:0; margin:0; padding:0; width:100%; height:100%; z-index:-999;

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

   
 
 автор: AlexSol   (30.06.2008 в 22:19)   письмо автору
 
   для: Blaster   (30.06.2008 в 19:42)
 

я прав, потому что то что вы придумали это полу-решения. единого нет.


хотя могу предложить вариант, если вас не пугает слово flash

   
 
 автор: Blaster   (01.07.2008 в 10:43)   письмо автору
 
   для: AlexSol   (30.06.2008 в 22:19)
 

Это слово меня пугает, еще больше оно будет пугать посетителей сайта...
А вот на JS это вполне реально сделать...

   
 
 автор: AlexSol   (01.07.2008 в 10:48)   письмо автору
 
   для: Blaster   (01.07.2008 в 10:43)
 

вы юморист

   
 
 автор: elenaki   (01.07.2008 в 11:37)   письмо автору
 
   для: Blaster   (01.07.2008 в 10:43)
 

flash пугает посетителей? первый раз слышу... может, это специальный, посетителе-отпугивающий ролик :O?

   
 
 автор: Blaster   (01.07.2008 в 20:12)   письмо автору
 
   для: elenaki   (01.07.2008 в 11:37)
 

Просто у многих людей, флэш бывает не установлен в браузере. Получается, тоже полу-решение...

   
 
 автор: AlexSol   (01.07.2008 в 22:51)   письмо автору
 
   для: Blaster   (01.07.2008 в 20:12)
 

вы просто не в теме. флеш плеер 6 вшит в XP а плее9 в Висту.

   
 
 автор: GeorgeIV   (02.07.2008 в 09:37)   письмо автору
 
   для: AlexSol   (01.07.2008 в 22:51)
 

только почему то всегда просят установить флэш-плэйер....

   
 
 автор: elenaki   (02.07.2008 в 10:30)   письмо автору
 
   для: Blaster   (01.07.2008 в 20:12)
 

это какие-то динозавры. к нам такие не ходят.

   
 
 автор: Eugene77   (11.07.2008 в 19:27)   письмо автору
 
   для: AlexSol   (30.06.2008 в 22:19)
 

Интересно!
Я думал, flesh всегда на передний план норовит выскочить.
Вы придумали как её приручить?

   
 
 автор: AlexSol   (12.07.2008 в 09:24)   письмо автору
 
   для: Eugene77   (11.07.2008 в 19:27)
 

если в код подключения flash добавить <param name="WMode" value="Opaque"> то можно помещать объекты поверх него

   
 
 автор: Eugene77   (12.07.2008 в 20:36)   письмо автору
 
   для: AlexSol   (12.07.2008 в 09:24)
 

>если в код подключения flash добавить <param name="WMode" value="Opaque"> то можно помещать объекты поверх него

От настроек браузера не будет зависеть?

   
 
 автор: AlexSol   (12.07.2008 в 23:09)   письмо автору
 
   для: Eugene77   (12.07.2008 в 20:36)
 

настройки браузера на отображение флеша имею только одно влияние - либо флешь разрешен либо нет :)

   
 
 автор: Dr Lines   (12.07.2008 в 08:41)   письмо автору
 
   для: Blaster   (30.06.2008 в 18:12)
 

Градиентный фон сделать очень просто.
Вот, например, как на этом сайте я сделал
http://91.202.197.190/lineradio/

И конечно же, этот фон рисуется из картинки шириной 1 px и высотой 2** (сколько надо)

Для простого примера горизонтального градиента, можно использовать одну такую полоску в качестве фона блока <body>, и растягиваться она будет на всю страницу.

для этого в стиле надо прописать
<style>
body
         {background-image:url(bg_gradient.png);
         background-repeat:repeat-y;
         background-color:rgb(200,200,200);}
</style>

В данном случае мы используем картинку горизонтального градиента (bg_gradient.png) с высотой 1px.
background-repeat:repeat-Y - тут указывается что растягиваться она будет только по оси Y (тогишь по вертикали)
background-color:rgb(200,200,200); - и тут указан в RGB стандарптный цвет фона нашей странички, там где нет градиента.

   
 
 автор: AlexSol   (12.07.2008 в 09:21)   письмо автору
 
   для: Dr Lines   (12.07.2008 в 08:41)
 

это все хороше, но вопрос был как растянуть, а не поместить сверху страницы

   
 
 автор: Dr Lines   (12.07.2008 в 09:45)   письмо автору
 
   для: AlexSol   (12.07.2008 в 09:21)
 

Я подробно описал, как при помощи стилей CSS растянуть изображение (градиентный фон) на всю длину страницы как фон.

   
 
 автор: AlexSol   (12.07.2008 в 11:01)   письмо автору
 
   для: Dr Lines   (12.07.2008 в 09:45)
 

css не позволяет растягивать фоновые изображения. вы предлагаете переход градиента фмксированной высоты в сплошной цвет.

   
 
 автор: Eugene77   (12.07.2008 в 20:38)   письмо автору
 
   для: Dr Lines   (12.07.2008 в 08:41)
 

Не могли бы вы прикрепить здесь и саму картинку.
А то уж очень неожиданно выглядит ваше решение.
Хочется в начале воспроизвести его в точности как вы делали.

   
 
 автор: Dr Lines   (12.07.2008 в 22:07)   письмо автору
 
   для: Eugene77   (12.07.2008 в 20:38)
 

Вот картинка для горизонтального градиента.
http://91.202.197.190/lineradio/images/backgr_list_top.png (6x337px 467байт)
background-repeat тут надо задать как repeat-x (по горизонтали).
Пример будет выглядеть так.
<style>
body
         {background-image:url(backgr_list_top.png);
         background-repeat:repeat-x;
         background-color:rgb(232,233,235);}
</style>

   
 
 автор: Eugene77   (13.07.2008 в 18:52)   письмо автору
 
   для: Dr Lines   (12.07.2008 в 22:07)
 

Да!
Такой градиент выглядит вполне приятно.
Но в начале вы говорили о картинках меньшего размера.
С ними что-то не так?
Расскажите, пожалуста! Поделитесь опытом!

   
 
 автор: Dr Lines   (13.07.2008 в 19:33)   письмо автору
 
   для: Eugene77   (13.07.2008 в 18:52)
 

В данном примере толщина полоски 6px.
Чтож, я действительно не случайно сделал ее толще.
Сделано это с целью облегчить нагрузку для браузера.
Т.к. дання картинка дублируется множество раз на экране, то чем она шире, тем браузер быстрее ее продублирует.

   
 
 автор: Eugene77   (14.07.2008 в 18:51)   письмо автору
 
   для: Dr Lines   (13.07.2008 в 19:33)
 

Шире - это понятно.
А короче нельзя?
Ступенчато получается?
Вы пробовали уже всё: gif, jpg, самое плавное у png?
Или это случайный выбор?
Или зависит от браузера?

   
 
 автор: AlexSol   (14.07.2008 в 19:50)   письмо автору
 
   для: Eugene77   (14.07.2008 в 18:51)
 

у png нет потери качества. высота картики с градиентом делается под ваши нужды.
ккой высоты хотите градиет такой и рисуете на картинке.

растягивать фоновые изображения в css нельзя

   
 
 автор: Eugene77   (16.07.2008 в 20:36)   письмо автору
 
   для: AlexSol   (14.07.2008 в 19:50)
 

Как же тогда сделать градиентный фон на форуме?
Высота страницы разная всегда получается, да и ширина зависит от монитора.

   
 
 автор: elenaki   (16.07.2008 в 20:45)   письмо автору
 
   для: Eugene77   (16.07.2008 в 20:36)
 

в боди стиль с градиентом (картинка определенной высоты) всегда вверху и фоном цвета у. градиент плавно переходит из цвета х в цвет у. внутри боди - слой с градиентом всегда снизу (наоборот - из цвета у в цвет х, тоже картинка).

   
 
 автор: Eugene77   (17.07.2008 в 19:53)   письмо автору
 
   для: elenaki   (16.07.2008 в 20:45)
 

Cпасибо за идею!
Вообще,очень полезная темаполучилась - так много узнал нового!
Ещё раз спасибо всем!

   
 
 автор: Dr Lines   (14.07.2008 в 20:43)   письмо автору
 
   для: Eugene77   (14.07.2008 в 18:51)
 

Растягивать картинку порседством css нельзя. Длина картинки определяется заранее при создании в графическом редакторе. Длина на качестве градиента практически не отражается (Зависит от графического редактора). Например я использую для этих целей редактор Corel Drow.

Почему использую png?
Вопервых PNG (Portable Network Graphics) - переносимая сетевая графика. Тогишь разработана для переноса по сети.
Вовторых изображения png отличаются высоким качеством. Поэтому у png действительно градиент выглядит плавнее чем у других форматов.

   
 
 автор: Dr Lines   (15.07.2008 в 12:16)   письмо автору
 
   для: Dr Lines   (14.07.2008 в 20:43)
 

Да кстати, наткнулся на очень интересную статью про формат png.
http://www.artlebedev.ru/tools/technogrette/etc/png-1/

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования