css рамка для слайдера картинкой

524

09 февраля 2017, 01:29

Всем привет! Собственно нужна рамка поверх слайда как картина. Попробовал через 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>

Answer 1

В общем делаете рамку пнг так, чтобы внутри была прозрачность, ставите блок с фоном этой рамки и накладываете через 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>

Answer 2

Сделайте блок, в него загнездите картинку с рамочкой. Фоном этого блока назначьте картинку с тётечкой. Назначьте тётеньке 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>

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