inokentik 45 Опубликовано: 23 ноября 2016 Рассказать Опубликовано: 23 ноября 2016 Всем привет! Все мы прекрасно знаем, что для BODY можно задать как просто цвет, так и градиент, а еще и картинку на фон.. Все это обычно пишем в файле стилей... И суть такова, если использовать просто цвет и картинку одновременно, то проблем нет, но если делать вместо цвета градиент, то он становится поверх всего, закрывая саму картинку.. Можно ли как то прописать, чтоб градиент был первым на фоне, а уже СВЕРХУ него накладывалась картинка?!?! Вот именно когда использую цвет, это срабатывает, то есть фон например синий, а сверху прозрачная картинка (решетка), но если ставить вместо цвета фона именно градиент, то он перекрывает все на свете и не получается сделать анимацию... Пример странички http://about-pokemon-go.ru/pokedex/1-bulbasaur.html может есть у кого мысли, как использовать и градиент и картинку (решетку), не делая это в виде одной картинки только... Цитата Ссылка на сообщение Поделиться на других сайтах
_kovalsky 0 Опубликовано: 23 ноября 2016 Рассказать Опубликовано: 23 ноября 2016 Все, что внутри body оборачиваете в Div. body - задаете градиент, DIVу задаете фон картинкой. Все. Цитата Ссылка на сообщение Поделиться на других сайтах
inokentik 45 Опубликовано: 23 ноября 2016 Рассказать Опубликовано: 23 ноября 2016 Автор 1 час назад, _kovalsky сказал: Все, что внутри body оборачиваете в Div. body - задаете градиент, DIVу задаете фон картинкой. Все. Так и было изначально... У BODY задан градиент... В main.tpl вставлено типа <div class="4444">{content}</div>... У класса 444 задан бэкграунд картинкой... И все равно получается так, что картинка не отображается, так как градиент поверх картинки =( Цитата Ссылка на сообщение Поделиться на других сайтах
germanydletest 438 Опубликовано: 23 ноября 2016 Рассказать Опубликовано: 23 ноября 2016 2 часа назад, inokentik сказал: И все равно получается так, что картинка не отображается, так как градиент поверх картинки =( про z-index, знать не знаем, правда? Цитата Ссылка на сообщение Поделиться на других сайтах
_kovalsky 0 Опубликовано: 24 ноября 2016 Рассказать Опубликовано: 24 ноября 2016 10 часов назад, inokentik сказал: Так и было изначально... У BODY задан градиент... В main.tpl вставлено типа <div class="4444">{content}</div>... У класса 444 задан бэкграунд картинкой... И все равно получается так, что картинка не отображается, так как градиент поверх картинки =( ну да, правильно. с Z-index поиграться надо. у Вас же дальше контент как то появляется поверх Body )) значит и этот див должен Цитата Ссылка на сообщение Поделиться на других сайтах
inokentik 45 Опубликовано: 24 ноября 2016 Рассказать Опубликовано: 24 ноября 2016 Автор 20 часов назад, germanydletest сказал: про z-index, знать не знаем, правда? знаем. прежде чем писать я ставил z-index у одного 1, у другого 99 и не сработало Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 934 Опубликовано: 24 ноября 2016 Рассказать Опубликовано: 24 ноября 2016 Что то ты мудришь, никаких z-index тут не надо. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> html, body { height: 100%; min-height: 100%; } body { background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #92c1e5 100%); background: -webkit-linear-gradient(top, #1e5799 0%, #92c1e5 100%); background: linear-gradient(to bottom, #1e5799 0%, #92c1e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#92c1e5', GradientType=0 ); } .bg { width: 100%; min-height: 100%; background: url(http://about-pokemon-go.ru/templates/Pokemon/images/pokedex_bg.png); } </style> </head> <body> <div class="bg"> <!-- ... content... --> </div> </body> </html> все и так работает. ЗЫ. Что бы z-index работал, оба слоя должны быть или relative или absolute Цитата Ссылка на сообщение Поделиться на других сайтах
inokentik 45 Опубликовано: 25 ноября 2016 Рассказать Опубликовано: 25 ноября 2016 Автор 8 часов назад, alex32 сказал: Что то ты мудришь, никаких z-index тут не надо. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> html, body { height: 100%; min-height: 100%; } body { background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #92c1e5 100%); background: -webkit-linear-gradient(top, #1e5799 0%, #92c1e5 100%); background: linear-gradient(to bottom, #1e5799 0%, #92c1e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#92c1e5', GradientType=0 ); } .bg { width: 100%; min-height: 100%; background: url(http://about-pokemon-go.ru/templates/Pokemon/images/pokedex_bg.png); } </style> </head> <body> <div class="bg"> <!-- ... content... --> </div> </body> </html> все и так работает. ЗЫ. Что бы z-index работал, оба слоя должны быть или relative или absolute Я так тоже пробовал, получается фон с градиентом, поверх решетка (как у меня и было), но при этом отваливается эффект движения решетки! Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 934 Опубликовано: 25 ноября 2016 Рассказать Опубликовано: 25 ноября 2016 На 1 Цитата Ссылка на сообщение Поделиться на других сайтах
inokentik 45 Опубликовано: 28 ноября 2016 Рассказать Опубликовано: 28 ноября 2016 Автор В 25.11.2016 в 12:20, alex32 сказал: На Клево!) Есть предложение, если интересует маленькая халтурка, свистни в личку)! Цитата Ссылка на сообщение Поделиться на других сайтах
inokentik 45 Опубликовано: 29 ноября 2016 Рассказать Опубликовано: 29 ноября 2016 Автор В 25.11.2016 в 12:20, alex32 сказал: На спасибо большое за помощь!! все получилось!!!! Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.