Html 如何在幻灯片后面放置背景图像？（将看起来像一个画框）_Html_Css_Slideshow

Html 如何在幻灯片后面放置背景图像？（将看起来像一个画框）

html css

Html 如何在幻灯片后面放置背景图像？（将看起来像一个画框）,html,css,slideshow,Html,Css,Slideshow,在这里的帮助下，我创建了一个滑块。现在我想在我的图片周围加一个iPad框架。所以看起来像是框架从iPad中滑出。但是iPad的框架不应该移动，因此它是一个背景。我尝试添加一个背景图像，但它没有显示出来它的所有CSS和HTML HTML: 这是我的JSFIDLE：图像不起作用，但幻灯片放映仍然有效。我只希望“框架”围绕图像谢谢。您只需添加一个环绕滑块的div，并在其上设置一个背景图像这里是一个非常粗略的示例，您必须自己处理元素的位置和大小，但是您应该能够在不需要太多额外工作的情况下获得它

在这里的帮助下，我创建了一个滑块。现在我想在我的图片周围加一个iPad框架。所以看起来像是框架从iPad中滑出。但是iPad的框架不应该移动，因此它是一个背景。我尝试添加一个背景图像，但它没有显示出来

它的所有CSS和HTML

HTML:

这是我的JSFIDLE：

图像不起作用，但幻灯片放映仍然有效。我只希望“框架”围绕图像

谢谢。

您只需添加一个环绕滑块的div，并在其上设置一个

背景图像
这里是一个非常粗略的示例，您必须自己处理元素的位置和大小，但是您应该能够在不需要太多额外工作的情况下获得它

<body style="margin:0">




        <!--Slider-->

        <div style="text-align: center; background-color: #81b969">


            <ul class="slides">
                <input type="radio" name="radio-btn" id="img-1" checked />
                <li class="slide-container">
                    <div class="slide">
                        <img src="images/3.png" />
                    </div>
                    <div class="nav">
                        <label for="img-5" class="prev"><img src="images/l-arrow.png" /></label>
                        <label for="img-2" class="next"><img src="images/r-arrow.png" /></label>
                    </div>
                </li>



                <input type="radio" name="radio-btn" id="img-2" />
                <li class="slide-container">
                    <div class="slide">
                        <img src="images/4.png" height="700px" ; />
                    </div>
                    <div class="nav">
                        <label for="img-1" class="prev"><img src="images/l-arrow.png" /></label>
                        <label for="img-3" class="next"><img src="images/r-arrow.png" /></label>
                    </div>
                </li>

                <br />

                <input type="radio" name="radio-btn" id="img-3" />
                <li class="slide-container">
                    <div class="slide">
                        <img src="images/5.png" />
                    </div>
                    <div class="nav">
                        <label for="img-2" class="prev"><img src="images/l-arrow.png" /></label>
                        <label for="img-4" class="next"><img src="images/r-arrow.png" /></label>
                    </div>
                </li>

                <input type="radio" name="radio-btn" id="img-4" />
                <li class="slide-container">
                    <div class="slide">
                        <img src="images/6.png" />
                    </div>
                    <div class="nav">
                        <label for="img-3" class="prev"><img src="images/l-arrow.png" /></label>
                        <label for="img-5" class="next"><img src="images/r-arrow.png" /></label>
                    </div>
                </li>

                <input type="radio" name="radio-btn" id="img-5" />
                <li class="slide-container">
                    <div class="slide">
                        <img src="images/7.png" />
                    </div>
                    <div class="nav">
                        <label for="img-4" class="prev"><img src="images/l-arrow.png" /></label>
                        <label for="img-1" class="next"><img src="images/r-arrow.png" /></label>
                    </div>
                </li>



                <!--Navigation Circles-->


                <li class="nav-dots">
                    <label for="img-1" class="nav-dot" id="img-dot-1"></label>
                    <label for="img-2" class="nav-dot" id="img-dot-2"></label>
                    <label for="img-3" class="nav-dot" id="img-dot-3"></label>
                    <label for="img-4" class="nav-dot" id="img-dot-4"></label>
                    <label for="img-5" class="nav-dot" id="img-dot-5"></label>
                </li>
            </ul>
            </div>
        </div>

    <div style="text-align: center; height:170px; background-color: #81b969"></div>

   img {
        border: 0;
    }

    .slides {
        padding: 0;
        width: 626px;
        height: 600px;
        display: block;
        margin: 0 auto;
        position: relative;
    }

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input {
    display: none;
}

.slide-container {
    display: block;

}

    .slide {
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        -webkit-animation: slide 0.5s forwards;
        -webkit-animation-delay: 2s;
        animation: slide 0.5s forwards;
        animation-delay: 2s;
        background-color:#000000;
    }

    .slide img {
        width: 100%;
        height: 100%;
    }

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;
    /* opacity: 0; */
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
}

    .prev {
        left: -200px;
        top: 170px;
    }

.slide:hover + .nav label {
    opacity: 0.5;
}

.nav label:hover {
    opacity: 1;
}

    .nav .next {
        left: 610px;
        top: 170px;
    }

input:checked + .slide-container .slide {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label {
    display: block;
}

.nav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

    .nav-dots .nav-dot {
        top: -30px;
        width: 11px;
        height: 11px;
        margin: 0 4px;
        position: relative;
        border-radius: 100%;
        display: inline-block;
        border: 1px solid #FFF;
    }

        .nav-dots .nav-dot:hover {
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0.8);
        }

    input#img-1:checked ~ .nav-dots label#img-dot-1,
    input#img-2:checked ~ .nav-dots label#img-dot-2,
    input#img-3:checked ~ .nav-dots label#img-dot-3,
    input#img-4:checked ~ .nav-dots label#img-dot-4,
    input#img-5:checked ~ .nav-dots label#img-dot-5,
    input#img-6:checked ~ .nav-dots label#img-dot-6 {
        background: rgba(255, 255, 255, 0.8);
    }