Изображение рамки поверх страницы 2.X

 
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Возникла необходимость наложить рамку на страницу сайта, так чтобы частично рамка перекрывала страницу с контентом. Так же интересует вопрос управления прозрачностью этой рамки.
Сейчас это выглядит так, в виде фона
Спойлер
Естественно края рамки перекрываются контентом и вид уже не тот.

Порылся в интернете и на форуме, но ничего не нарыл!
Можно ли сделать наложение рамки по типу фотошопа и как это сделать? Рамка должна быть на всех страницах.
Имеется изображение рамки с убранным фоном в середине.
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 2102
vikont,
Оберните див layout в еще один див и нарисуйте ему бэкграундом нужную картинку.
Дальше стилями педдинг, прозрачность наложение и т.д.
В общем это простой html, особого программирования не нужно.
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Если бы это было так просто для меня, то и вопроса не задал... smile
Знаете, есть вещи в которых я тоже так просто могу бросить, да что тут делать..., но большинство не в состоянии это делать.. laugh
Как говорится не всем пироги печь, надо кому то и сапоги точать, хотя иногда и пироги надо как то спечь...
...если короче, то кто бы пальчиком ткнул...
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2564
Рамку нужно порезать . Цельный рисунок вы не выравняете по высоте.
Лучше использовать рамку с простым однотипным рисунком вдоль сторон рамки и допускается рисунки по углам, в примере ниже они должны входить в квадрат 60 на 60 пикселей.
В принципе можно использовать рамку со сложным рисунком снизу и сверху, но вот с боков по любому не просчитаете высоту рамки, и это должен быть такой рисунок который хорошо смотрится при повторении по высоте.

верстка может быть примерно такая. там подсказки

Код PHP:
  1. <!--kontent div -->
  2. <div style="width:1000px; min-height:100%; display:block; position:relative; margin:0; padding:0; background:#CCCCCC;">
  3. <!-- верхняя часть рамки--->
  4. <div style="width:1000px; height:60px; opacity:0.5; background:#009933 url(top.jpg) repeat-x; position:absolute; top:0; left:50%; margin-left:-500px; z-index:1000;"></div>
  5. <!-- нижняя часть рамки--->
  6. <div style="width:1000px; height:60px; opacity:0.5; background:#009933 url(bottom.jpg) repeat-x; position:absolute; bottom:0; left:50%; margin-left:-500px; z-index:1000;"></div>
  7. <!-- левая часть рамки--->
  8. <div style="width:60px; opacity:0.5; background: #CC0000 url(left.jpg) repeat-x; position:absolute; display:block; height:100%; min-height:100%; top:0; left:50%; margin-left:-500px; z-index:1000;"></div>
  9. <!-- правая часть рамки--->
  10. <div style="width:60px; opacity:0.5; background: #CC0000 url(left.jpg) repeat-x; position:absolute; display:block; height:100%; min-height:100%; top:0; right:50%; margin-right:-500px; z-index:1000;"></div>
  11. <!-- углы лево верх, право верх, лево низ, право низ--->
  12. <div style="width:60px; height:60px; opacity:0.5;background:#FFFF00 url(lefttop.jpg) no-repeat; position:absolute; left:0; top:0; z-index:1001;"></div>
  13. <div style="width:60px; height:60px; opacity:0.5; background:#FFFF00 url(righttop.jpg) no-repeat; position:absolute; right:0; top:0; z-index:1001;"></div>
  14. <div style="width:60px; height:60px; opacity:0.5; background:#FFFF00 url(leftbottom.jpg) no-repeat; position:absolute; left:0; bottom:0; z-index:1001;"></div>
  15. <div style="width:60px; height:60px;opacity:0.5; background:#FFFF00 url(rightbottom.jpg) no-repeat; position:absolute; right:0; bottom:0; z-index:1001;"></div>
  16. <!----конец основного дива с контентом--->
  17. </div>
Это результат у меня

Изображение рамки поверх страницы
я заполнял рамку цветами без рисунка, но смысл тот же
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 2102
Нил™,
Так сейчас борстч уже никто не варит.
Достаточно повесить на layout широкий бордюр и заполнить его картинкой:
http://htmlbook.ru/css/border-image

Спойлер
Редактировалось: 1 раз (Последний: 19 сентября 2017 в 22:58)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1169
Код CSS:
  1. html:before {
  2. content: "";
  3. display: block;
  4. border: 100px solid transparent;
  5. -webkit-border-image: url(http://demo.instantcms.ru/upload/000/u1/000/9440492e.jpg) 30 stretch;
  6. border-image: url(http://demo.instantcms.ru/upload/000/u1/000/9440492e.jpg) 30 stretch;
  7. width: calc(100% - 200px);
  8. height: calc(100% - 200px);
  9. position: fixed;
  10. }
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Ris:
Нил™,
Так сейчас борстч уже никто не варит.
Достаточно повесить на layout широкий бордюр и заполнить его картинкой:
http://htmlbook.ru/css/border-image
Не знаю как там борщ, а вот венигрет получился отменный..., вокруг каждого блока... это лучше увидеть
Спойлер
Как я сделал такое открытие? Очень просто. Как показано по ссылке вставил код над закрытием шапки </HEAD>
Спойлер
А вот сама рамка с дыркой вместо фона, которую надо наложить поверх страницы и чтобы страница прокручивалась внутри ее.
Спойлер
Сайт для детского сада... ну сами понимаете, бесплатно делается, так что прошу никуда ни к кому за денежку не посылать.
Кто может, просто помогите как сделать.
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Val, спасибо, в каком файле и куда прописывать?
Я пока в main ковыряю, а какой надо?
Редактировалось: 1 раз (Последний: 19 сентября 2017 в 23:05)
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Воткнул в theme-layout.css рамку превратили в бордюр и обвели по контуру весь экран.
Если туда поместил код, то результат не тот.
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 2102
vikont,
Воткните вашу картинку в боди бэкграудом да и всё.
Спойлер
Редактировалось: 2 раз (Последний: 19 сентября 2017 в 23:27)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Ris:
vikont,
Воткните вашу картинку вбоди бэкграудом да и всё.
Давно воткнута и работает фоном, то есть позади страницы, а идея в том, чтобы страница было позади рамки
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 2102
vikont,
Доработайте картинку фотошопом или пайнтнетом, чтобы вместо белого прозрачный фон и z-index ей пропишите.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Ris:
vikont,
Доработайте картинку фотошопом или пайнтнетом, чтобы вместо белого прозрачный фон и z-index ей пропишите.
Файл ramka1.png уже с вырезанным фоном. А толку, если страница поверх ее двигается, а не за ней.
Если бы двигалась за рамкой, тогда бы и увидели, что фона нет smile
Сама рамка https://yadi.sk/i/dW6VJjO23N4ESF
Редактировалось: 1 раз (Последний: 19 сентября 2017 в 23:38)
Недорогой и мощный хостинг для InstantCMS
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2564
Ris, я варю. кому не нравится - может не есть.

vikont, прозрачный фон картинки не означает что на странице поверх которой вы хотите положить картинку с прозрачным фоном, прозрачное место будет дыркой. Не будет. Это будет сплошная картинка поверх слоя и вы тупо не сможете кликнуть по ссылке.
Поэтому картинку нужно резать на элементы и потом на странице собирать снова через позиционирование.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 1573
Нил™:
vikont, прозрачный фон картинки не означает что на странице поверх которой вы хотите положить картинку с прозрачным фоном, прозрачное место будет дыркой. Не будет. Это будет сплошная картинка поверх слоя и вы тупо не сможете кликнуть по ссылке.
Поэтому картинку нужно резать на элементы и потом на странице собирать снова через позиционирование.
Жаль, спасибо Нил!. В каком файле прописывать ваш код? И каком месте лучше это сделать.
Недорогой и мощный хостинг для InstantCMS
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: