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

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X
#1 19 сентября 2017 в 20:26
Возникла необходимость наложить рамку на страницу сайта, так чтобы частично рамка перекрывала страницу с контентом. Так же интересует вопрос управления прозрачностью этой рамки.
Сейчас это выглядит так, в виде фона
Естественно края рамки перекрываются контентом и вид уже не тот.

Порылся в интернете и на форуме, но ничего не нарыл!
Можно ли сделать наложение рамки по типу фотошопа и как это сделать? Рамка должна быть на всех страницах.
Имеется изображение рамки с убранным фоном в середине.
#2 19 сентября 2017 в 20:36
vikont,
Оберните див layout в еще один див и нарисуйте ему бэкграундом нужную картинку.
Дальше стилями педдинг, прозрачность наложение и т.д.
В общем это простой html, особого программирования не нужно.
#3 19 сентября 2017 в 21:39
Если бы это было так просто для меня, то и вопроса не задал… smile
Знаете, есть вещи в которых я тоже так просто могу бросить, да что тут делать..., но большинство не в состоянии это делать… laugh
Как говорится не всем пироги печь, надо кому то и сапоги точать, хотя иногда и пироги надо как то спечь...
… если короче, то кто бы пальчиком ткнул…
#4 19 сентября 2017 в 22:06
Рамку нужно порезать. Цельный рисунок вы не выравняете по высоте.
Лучше использовать рамку с простым однотипным рисунком вдоль сторон рамки и допускается рисунки по углам, в примере ниже они должны входить в квадрат 60 на 60 пикселей.
В принципе можно использовать рамку со сложным рисунком снизу и сверху, но вот с боков по любому не просчитаете высоту рамки, и это должен быть такой рисунок который хорошо смотрится при повторении по высоте.

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

  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>
Это результат у меня


я заполнял рамку цветами без рисунка, но смысл тот же
#5 19 сентября 2017 в 22:29
Нил™,
Так сейчас борстч уже никто не варит.
Достаточно повесить на layout широкий бордюр и заполнить его картинкой:
htmlbook.ru/css/border-image

#6 19 сентября 2017 в 22:56
  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. }
#7 19 сентября 2017 в 23:03

Нил™,
Так сейчас борстч уже никто не варит.
Достаточно повесить на layout широкий бордюр и заполнить его картинкой:
htmlbook.ru/css/border-image

Ris
Не знаю как там борщ, а вот венигрет получился отменный..., вокруг каждого блока… это лучше увидеть
Как я сделал такое открытие? Очень просто. Как показано по ссылке вставил код над закрытием шапки </HEAD>
  1. <title>border-image</title>
  2. <style>
  3. div {
  4. border: 30px solid #40c4c8;
  5. padding: 20px;
  6. -moz-border-image: url(/ramka.png) 30 round round;
  7. -webkit-border-image: url(/ramka.png) 30 round round;
  8. -o-border-image: url(/ramka.png) 30 round round;
  9. border-image: url(i/ramka.png) 30 round round;
  10. }
  11. </style>
А вот сама рамка с дыркой вместо фона, которую надо наложить поверх страницы и чтобы страница прокручивалась внутри ее.
Сайт для детского сада… ну сами понимаете, бесплатно делается, так что прошу никуда ни к кому за денежку не посылать.
Кто может, просто помогите как сделать.
#8 19 сентября 2017 в 23:04
Val, спасибо, в каком файле и куда прописывать?
Я пока в main ковыряю, а какой надо?
#9 19 сентября 2017 в 23:15
Воткнул в theme-layout.css рамку превратили в бордюр и обвели по контуру весь экран.
Если туда поместил код, то результат не тот.
#10 19 сентября 2017 в 23:23
vikont,
Воткните вашу картинку в боди бэкграудом да и всё.
#11 19 сентября 2017 в 23:27

vikont,
Воткните вашу картинку вбоди бэкграудом да и всё.

Ris
Давно воткнута и работает фоном, то есть позади страницы, а идея в том, чтобы страница было позади рамки
#12 19 сентября 2017 в 23:30
vikont,
Доработайте картинку фотошопом или пайнтнетом, чтобы вместо белого прозрачный фон и z-index ей пропишите.
#13 19 сентября 2017 в 23:33

vikont,
Доработайте картинку фотошопом или пайнтнетом, чтобы вместо белого прозрачный фон и z-index ей пропишите.

Ris
Файл ramka1.png уже с вырезанным фоном. А толку, если страница поверх ее двигается, а не за ней.
Если бы двигалась за рамкой, тогда бы и увидели, что фона нет smile
Сама рамка yadi.sk/i/dW6VJjO23N4ESF
#14 19 сентября 2017 в 23:55
Ris, я варю. кому не нравится — может не есть.

vikont, прозрачный фон картинки не означает что на странице поверх которой вы хотите положить картинку с прозрачным фоном, прозрачное место будет дыркой. Не будет. Это будет сплошная картинка поверх слоя и вы тупо не сможете кликнуть по ссылке.
Поэтому картинку нужно резать на элементы и потом на странице собирать снова через позиционирование.
#15 20 сентября 2017 в 00:03

vikont, прозрачный фон картинки не означает что на странице поверх которой вы хотите положить картинку с прозрачным фоном, прозрачное место будет дыркой. Не будет. Это будет сплошная картинка поверх слоя и вы тупо не сможете кликнуть по ссылке.
Поэтому картинку нужно резать на элементы и потом на странице собирать снова через позиционирование.

Нил™
Жаль, спасибо Нил!. В каком файле прописывать ваш код? И каком месте лучше это сделать.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.