HTML和CSS-在“邊框”圖像中顯示圖像

Question

我目前在使用JavaScript滑塊/幻燈片時遇到問題。 本質上，我在滑塊中顯示了4張圖像。 但是，我希望在此滑塊的邊框上有一個圖像，因此它會“覆蓋”這些圖像以使其看起來像滑塊圖像都在此邊框圖像內。

我的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;
}

所以從本質上講，我的問題是如何在滑塊邊框內的滑塊顯示中制作圖像？

Answer 1

#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;
}

我看到上面的代碼在演示站點中使用

HTML和CSS-在“邊框”圖像中顯示圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2012-12-15 14:04:54

HTML和CSS-在“邊框”圖像中顯示圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2012-12-15 14:04:54

解決方案1
0 已采納 2012-12-15 14:04:54