HTML 및 CSS - '테두리'이미지 내부에 이미지 표시

현재 JavaScript 슬라이더/슬라이드 쇼에 문제가 있습니다. 기본적으로 슬라이더에 4 개의 이미지가 표시됩니다. 그러나이 슬라이더의 테두리에 대한 이미지를 갖고 싶습니다. 슬라이더 이미지가이 테두리 이미지 안에있는 것처럼 보이도록 이미지를 '오버레이'합니다.HTML 및 CSS - '테두리'이미지 내부에 이미지 표시

지금은 the same looking slider/slideshow을 얻으려고합니다. 그러나 this is what I currently have.

내 HTML 코드 :

<body> 
    <div id="container"> 
     <div id="frame"></div> 
     <div id="slides"> 
      <a href="#" class="prev"></a> 
      <a href="#" class="next"></a> 
      <div class="slides_container"> 
       <img src="img/slider/1.jpg" width="954" height="247" alt="Slide 1"> 
       <img src="img/slider/2.jpg" width="954" height="247" alt="Slide 2"> 
       <img src="img/slider/3.jpg" width="954" height="247" alt="Slide 3"> 
       <img src="img/slider/4.jpg" width="954" height="247" alt="Slide 4"> 
      </div> 
     </div> 
    </div> 
</body>

내 CSS 코드 :

는

/* 
    Page style 
*/ 

body { 
} 

#container { 
    width: 964px; 
    height: 257px; 
    z-index: 99999; 
    padding: 10px; 
    margin: 0 auto; 
    position: relative; 
} 

#frame { 
    background: url(../img/slider_frame.png) no-repeat; 
    width: 964px; 
    height: 257px; 
    position: absolute; 
    top: -3px; 
    left: -80px; 
    z-index: 0; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    pointer-events: none; 
    -moz-box-shadow:; 
    -webkit-box-shadow:; 
    box-shadow: 0 0 5px #000, 0 0 6px #000; 
} 

/* 
    Slideshow 
*/ 

#slides { 
    position: absolute; 
    top: 1px; 
    left: -74px; 
    z-index: 100; 

    width: 954px; 
    height: 247px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

/* 
    Slides container 
    Important: 
    Set the width of your slides container 
    Set to display none, prevents content flash 
*/ 

.slides_container { 
    width: 954px; 
    position: relative; 
    display: none; 
} 

/* 
    Each slide 
    Important: 
    Set the width of your slides 
    If height not specified height will be set by the slide content 
    Set to display block 
*/ 

.slides_container a { 
    width: 570px; 
    height: 270px; 
    display: block; 
} 

.slides_container a img { 
    display: block; 
} 

/* 
    Next/prev buttons 
*/ 

#slides .next, #slides .prev { 
    position: absolute; 
    top: 129px; 
    left: -80px; 
    width: 48px; 
    height: 48px; 
    display: block; 
    z-index: 101; 
} 

#slides .next { 
    background-image: url(../img/arrow-right.png); 
} 

#slides .next:hover { 
    background-image: url(../img/arrow-right-hov.png); 
} 

#slides .prev { 
    background-image: url(../img/arrow-left.png); 
} 

#slides .prev:hover { 
    background-image: url(../img/arrow-left-hov.png); 
} 

#slides .next { 
    left: 826px; 
}

그래서 본질적으로 내 질문에 내가 슬라이드의 테두리 내에서 슬라이더 디스플레이의 이미지를 어떻게해야합니까입니까? 나는 위의 코드를 참조

출처

2012-12-15 Mko

#container { 
    height: 257px; 
    width: 964px; 
    z-index: 99999; 
} 
#frame { 
background: url(../img/slider_frame.png) no-repeat scroll 0 0 transparent; 
    border-radius: 4px 4px 4px 4px; 
    box-shadow: 0 0 5px #000000, 0 0 6px #000000; 
    height: 257px; 
    left: 0; 
    pointer-events: none; 
    position: absolute; 
    top: -5px; 
    width: 964px; 
    z-index: 99999; 
} 
#slider ul, #slider li { 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
} 

#slider li, #slider2 li { 
    border-radius: 3px 3px 3px 3px; 
    height: 247px; 
    overflow: hidden; 
    width: 954px; 
}

데모 사이트

출처

2012-12-15 14:04:54 underscore

내가 알고 있어요에서 사용하는 것입니다. 그러나 현재 설정을 사용하여 CSS를 '데모 사이트'처럼 보이게하려면 어떻게해야합니까? – Mko

CTRL + S를 넣고 데모 사이트를 PC에 저장하고 images.that을 바꾸십시오. – underscore

몇 가지 수정을 거친 후 작동했습니다. 고마워요 :) – Mko

HTML 및 CSS - '테두리'이미지 내부에 이미지 표시

답변

관련 문제