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
    7 фев 2017 в 17:50
  • Она в png, это ее преобразовало почему то потом, заменил снова.
    – Dias
    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
    7 фев 2017 в 18:13
  • Поменял вашу рамку на пнг
    – Karalahti
    7 фев 2017 в 18:43
  • Еще не учел тот факт что может быть адаптивным, переделал не много.
    – Karalahti
    7 фев 2017 в 19:00
  • Спасибо, с background тоже как вариант подходит, если cover ставить тоже адаптивным получается.
    – Dias
    8 фев 2017 в 10:14
  • не совсем, если cover поставить то при уменьшении рамка обрезается сверху, на сколько я помню
    – Karalahti
    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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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