Border Bild auf ul-Tag html

Question

Ich habe ein Bild eines leeren Rahmen

heruntergeladen ich diesen Rahmen nutzen wollte eine Liste der Geschäftszeiten zu umschließen

<div class="col-lg-5 col-lg-offset-2 col-sm-6"> 
<div class="content4"> 
<ul class="grid cs-style" > 
<li> 
<figure> 
<figcaption> 
<div class="time-table"> 
<h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3> 
       <div class="inner-bg js--timetable"> 
       <dl class="week-day" data-day="1"> 
       <dt>Monday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day light-bg" data-day="2"> 
       <dt>Tuesday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day" data-day="3"> 
       <dt>Wednesday</dt> 
       <dd>8:00-18:00</dd> 
       </dl> 
       <dl class="week-day light-bg" data-day="4"> 
       <dt>Thursday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day" data-day="5"> 
       <dt>Friday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day light-bg" data-day="6"> 
       <dt>Saturday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day closed" data-day="0"> 
       <dt>Sunday</dt> 
       <dd>CLOSED</dd> 
       </dl> 
       </div> 
         </figcaption> 
        </figure> 
       </li> 
      </ul> 
      </div> 
       </div> 

Aber ich don Ich weiß nicht, wie man den Bildrahmen über oder um den Tag legt. Und auch, wie Sie den Rahmen mithilfe von CSS- oder HTML-Attributen anpassen, um genau auf die Liste zu passen. Bitte helfen Sie mir.

Answer 1

Verwenden border-image

Border-image @ MDN

Etwas wie folgt aus:

.time-table { 
 
    text-align: center; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border:60px solid transparent; 
 
    border-image:url(http://www.clipartbest.com/cliparts/dc6/e6E/dc6e6E8oi.png) 80 60 60 stretch; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-lg-5 col-lg-offset-2 col-sm-6"><div class="time-table"> 
 
    <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3> 
 
    <div class="inner-bg js--timetable"> 
 
    <dl class="week-day" data-day="1"> 
 
     <dt>Monday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day light-bg" data-day="2"> 
 
     <dt>Tuesday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day" data-day="3"> 
 
     <dt>Wednesday</dt> 
 
     <dd>8:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day light-bg" data-day="4"> 
 
     <dt>Thursday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day" data-day="5"> 
 
     <dt>Friday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day light-bg" data-day="6"> 
 
     <dt>Saturday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day closed" data-day="0"> 
 
     <dt>Sunday</dt> 
 
     <dd>CLOSED</dd> 
 
    </dl> 
 
    </div> 
 
    </div>