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

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

1
2
3
Следующая
Показаны 1-15 из 33

#1 19 сентября 2017 в 20:26

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

Спойлер

Естественно края рамки перекрываются контентом и вид уже не тот.

Порылся в интернете и на форуме, но ничего не нарыл!
Можно ли сделать наложение рамки по типу фотошопа и как это сделать? Рамка должна быть на всех страницах.
Имеется изображение рамки с убранным фоном в середине.

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#2 19 сентября 2017 в 20:36

vikont,
Оберните див layout в еще один див и нарисуйте ему бэкграундом нужную картинку.
Дальше стилями педдинг, прозрачность наложение и т.д.
В общем это простой html, особого программирования не нужно.

#3 19 сентября 2017 в 21:39

Если бы это было так просто для меня, то и вопроса не задал… smile

Знаете, есть вещи в которых я тоже так просто могу бросить, да что тут делать..., но большинство не в состоянии это делать… laugh

Как говорится не всем пироги печь, надо кому то и сапоги точать, хотя иногда и пироги надо как то спечь...
… если короче, то кто бы пальчиком ткнул…

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

Сегодня в 07:32

#4 19 сентября 2017 в 22:06

Рамку нужно порезать. Цельный рисунок вы не выравняете по высоте.
Лучше использовать рамку с простым однотипным рисунком вдоль сторон рамки и допускается рисунки по углам, в примере ниже они должны входить в квадрат 60 на 60 пикселей.
В принципе можно использовать рамку со сложным рисунком снизу и сверху, но вот с боков по любому не просчитаете высоту рамки, и это должен быть такой рисунок который хорошо смотрится при повторении по высоте.

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

<!--kontent div -->
<div style="width:1000px; min-height:100%; display:block; position:relative; margin:0; padding:0; background:#CCCCCC;">
<!-- верхняя часть рамки--->
<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>
<!-- нижняя часть рамки--->
<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>
<!-- левая часть рамки--->
<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>
<!-- правая часть рамки--->
<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>
<!-- углы лево верх, право верх, лево низ, право низ--->
<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>
<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>
<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>
<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>
<!----конец основного дива с контентом--->
</div>

Это результат у меня

я заполнял рамку цветами без рисунка, но смысл тот же

#5 19 сентября 2017 в 22:29

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

Спойлер

#6 19 сентября 2017 в 22:56

html:before {
    content: "";
    display: block;
    border: 100px solid transparent;
    -webkit-border-image: url(http://demo.instantcms.ru/upload/000/u1/000/9440492e.jpg) 30 stretch;
    border-image: url(http://demo.instantcms.ru/upload/000/u1/000/9440492e.jpg) 30 stretch;
    width: calc(100% - 200px);
    height: calc(100% - 200px);
    position: fixed;
}

#7 19 сентября 2017 в 23:03

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

Не знаю как там борщ, а вот венигрет получился отменный..., вокруг каждого блока… это лучше увидеть

Спойлер

Как я сделал такое открытие? Очень просто. Как показано по ссылке вставил код над закрытием шапки </HEAD>

Спойлер

  <title>border-image</title>
  <style>
   div {
    border: 30px solid #40c4c8;
    padding: 20px;
    -moz-border-image: url(/ramka.png) 30 round round;
    -webkit-border-image: url(/ramka.png) 30 round round; 
    -o-border-image: url(/ramka.png) 30 round round;
    border-image: url(i/ramka.png) 30 round round;
   }
  </style>

А вот сама рамка с дыркой вместо фона, которую надо наложить поверх страницы и чтобы страница прокручивалась внутри ее.

Спойлер

Сайт для детского сада… ну сами понимаете, бесплатно делается, так что прошу никуда ни к кому за денежку не посылать.
Кто может, просто помогите как сделать.

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#8 19 сентября 2017 в 23:04

Val, спасибо, в каком файле и куда прописывать?
Я пока в main ковыряю, а какой надо?

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#9 19 сентября 2017 в 23:15

Воткнул в theme-layout.css рамку превратили в бордюр и обвели по контуру весь экран.
Если туда поместил код, то результат не тот.

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#10 19 сентября 2017 в 23:23

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

Спойлер

#11 19 сентября 2017 в 23:27

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

Давно воткнута и работает фоном, то есть позади страницы, а идея в том, чтобы страница было позади рамки

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#12 19 сентября 2017 в 23:30

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

#13 19 сентября 2017 в 23:33

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

Файл ramka1.png уже с вырезанным фоном. А толку, если страница поверх ее двигается, а не за ней.
Если бы двигалась за рамкой, тогда бы и увидели, что фона нет smile

Сама рамка yadi.sk/i/dW6VJjO23N4ESF

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

#14 19 сентября 2017 в 23:55

Ris, я варю. кому не нравится — может не есть.

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

#15 20 сентября 2017 в 00:03

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

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

По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках! Дешевые домены здесь! Чат-боты для любых соцсетей

1
2
3
Следующая
Показаны 1-15 из 33

Как изменить стиль номеров в с

Загрузка изображений(урезает ф

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

Похожие темы

Неизвестный h4 поверх всех тегов

Помогите разобраться с размером изображения в списке

Тип контента, комментарии, изображения

OWL-слайдер набора изображений отображение

[ЕСТЬ РЕШЕНИЕ] Формат WEBP в наборе изображений

[ЕСТЬ РЕШЕНИЕ] Как изменить размер изображения при загрузке

InstantCMS Team

О проекте

Поддержка

Дополнения