0

Всем привет! Собственно нужна рамка поверх слайда как картина. Попробовал через border-image, не получается. Картинка получается не под рамкой и полоски остаются от бордера (сделал фон черный, чтобы видно было).

#borderimg1 { 
    border: 55px solid transparent;
    -webkit-border-image: url(http://www.picshare.ru/uploads/170207/8CLqyr97t7.png) 100 stretch; /* Safari 3.1-5 */
    -o-border-image: url(http://www.picshare.ru/uploads/170207/8CLqyr97t7.png) 100 stretch; /* Opera 11-12.1 */
    border-image: url(http://www.picshare.ru/uploads/170207/8CLqyr97t7.png) 100 stretch;
display:inline-block;
}
body {background:#000;}
<div id="borderimg1">
<img src="http://i.piccy.info/i9/a6ba5f06ff28412508622f6d045945ee/1486410047/74902/1116299/slide_1.jpg">
</div>

2
  • сделайте рамку в png! У вас не выйдет сделать её верно так как она идет jpg да еще и с черным фоном.
    – Karalahti
    Commented 7 февр. 2017 в 17:50
  • Она в png, это ее преобразовало почему то потом, заменил снова.
    – Dias
    Commented 7 февр. 2017 в 18:08

2 ответа 2

0

В общем делаете рамку пнг так, чтобы внутри была прозрачность, ставите блок с фоном этой рамки и накладываете через position: absolute и z-index рамку поверх ваших слайдов. + падинг не забываем в размер самой рамки чтоб картинка не обрезелась.

#borderimg1{
  position: relative;
  padding-top: 4%;
}
#borderimg1 img{
  position: relative;
  max-width: 100%;
  height: auto;
}
.frame { 
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
display:block;
}
body {background:#000;}
<div id="borderimg1">
  <div class="frame">
    <img src="http://www.picshare.ru/uploads/170207/8CLqyr97t7.png">
   </div>
  <img src="http://i.piccy.info/i9/a6ba5f06ff28412508622f6d045945ee/1486410047/74902/1116299/slide_1.jpg">
 
</div>

5
  • По факту, если сделать рамку пнг и внутри будит прозрачность и у картинки z-index поставить 1 получится так как вы хотите prntscr.com/e5qqn4
    – Karalahti
    Commented 7 февр. 2017 в 18:13
  • Поменял вашу рамку на пнг
    – Karalahti
    Commented 7 февр. 2017 в 18:43
  • Еще не учел тот факт что может быть адаптивным, переделал не много.
    – Karalahti
    Commented 7 февр. 2017 в 19:00
  • Спасибо, с background тоже как вариант подходит, если cover ставить тоже адаптивным получается.
    – Dias
    Commented 8 февр. 2017 в 10:14
  • не совсем, если cover поставить то при уменьшении рамка обрезается сверху, на сколько я помню
    – Karalahti
    Commented 8 февр. 2017 в 10:29
0

Сделайте блок, в него загнездите картинку с рамочкой. Фоном этого блока назначьте картинку с тётечкой. Назначьте тётеньке background-size:contain;

<style type="text/css">
    #kartina-style{
         background-image:url('path/to/tyotenka');
         background-repeat:no-repeat;
         background-size:contain;
    }
</style>
<div id="kartina-style">
    <img src="path/to/ramochka" alt="ramochka" />
</div>

Размер картины будет определяться размером рамки.Один из вариантов.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.