我在这里的一些帮助下构建了一个滑块。现在我想在我的图像周围添加一个iPad框架。所以它看起来就像是从iPad上滑下来的。但iPad的框架不应该移动，因此它是一个背景。我试着添加一个背景图像，但它没有显示出来。
它的所有CSS&HTML。
HTML:
<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>
CSS：
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);
}
这是我的小提琴：https://jsfiddle.net/vz3bjL6s/
图像不起作用，但幻灯片放映仍然起作用。我只是希望"框架"围绕图像。
谢谢。
您只需添加一个div，该div包裹在滑块上并在其上设置一个background-image。
这里有一个非常粗略的例子，你必须自己处理元素的位置和大小，但你应该能够在没有太多额外工作的情况下获得它。
https://jsfiddle.net/qb8bz5o7/