我只在CSS中使用CSS照片库而且我遇到了问题。我尝试用5个元素（图片）做一个灯箱，它工作得很好。但是，当我想添加一些新图片时，它不再起作用，我不知道为什么。它就像最后一张图片在页面中的其他元素前面以完整尺寸显示（但具有隐藏属性）。所以我看到了页面，但我无法点击链接...... 这是代码：
#GalleryContent {
height: 817px;
margin-top: 100px;
margin-left: 55px;
}
#gallery a {
text-decoration:none;
}
#gallery .item {
width: 200px; height: 200px; overflow: hidden;
float: left;
border: 5px solid #000;
margin: 5px;
box-shadow: 1px 1px 1px 1px #d8c4a3;
}
#gallery .item a {
overflow: hidden;
}
#gallery .item a img {
height: 100%;
align-self: center;
}
.lightbox {
/** Hide the lightbox */
opacity: 0;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 90%;
top: -100%;
left: 0;
color:#333333;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.lightbox:target {
/** Show lightbox when it is target */
opacity: 1;
outline: none;
top: 0;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 500px;
margin: auto;
padding: 20px 30px 20px 30px;
background-color: #000;
box-shadow: 0px 1px 26px -3px #000;
font-family: 'IM Fell English', serif;
color: #FFF;
}
.lightbox .title {
margin: 0;
padding: 0 0 10px 0px;
border-bottom: 1px #ccc solid;
}
.lightbox .content {
display: block;
position: relative;
}
.lightbox .close {
display:block;
float:right;
margin-top: -10px;
text-decoration:none;
font-family: 'Helvetica', sans-serif;
font-size: 0.8em;
color: #FFF;
border: 1px solid #FFF;
padding: 0px 3px 2px 3px;
}
.lightbox #legend {
padding-bottom: 10px;
margin-top: -10px;
}
.clear {
display:block;
clear:both;
}
/* back and previous buttons */
.lightbox .next,
.lightbox .prev,
.lightbox .close {
display:block;
text-decoration:none;
}
.prev {
float:left;
color:#FFF;
padding-top: 12px;
}
.next {
float:right;
color:#FFF;
padding-top: 12px;
}
.close {
float:right;
}
.clear {
display:block;
clear:both;
}<div id="GalleryContent">
<section id="gallery">
<section class="item">
<a href="#img1">
<img src="images/galerie/voltigeurs-1.jpg">
</a>
</section>
<section class="item">
<a href="#img2">
<img src="images/galerie/voltigeurs-2.jpg">
</a>
</section>
<section class="item">
<a href="#img3">
<img src="images/galerie/voltigeurs-3.jpg">
</a>
</section>
<section class="item">
<a href="#img4">
<img src="images/galerie/voltigeurs-4.jpg">
</a>
</section>
<section class="item">
<a href="#img5">
<img src="images/galerie/voltigeurs-5.jpg">
</a>
</section>
<section class="item">
<a href="#img6">
<img src="images/galerie/voltigeurs-6.jpg">
</a>
</section>
<section class="item">
<a href="#img7">
<img src="images/galerie/voltigeurs-7.jpg">
</a>
</section>
<section class="item">
<a href="#img8">
<img src="images/galerie/voltigeurs-8.jpg">
</a>
</section>
<section class="item">
<a href="#img9">
<img src="images/galerie/voltigeurs-9.jpg">
</a>
</section>
<section class="item">
<a href="#img10">
<img src="images/galerie/voltigeurs-10.jpg">
</a>
</section>
<section class="item">
<a href="#img11">
<img src="images/galerie/voltigeurs-11.jpg">
</a>
</section>
<section class="item">
<a href="#img12">
<img src="images/galerie/voltigeurs-12.jpg">
</a>
</section>
</section>
</div>
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">1</div>
<div class="content">
<img src="images/galerie/voltigeurs-1.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img2"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img2">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">2</div>
<div class="content">
<img src="images/galerie/voltigeurs-2.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img1"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img3"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img3">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">3</div>
<div class="content">
<img src="images/galerie/voltigeurs-3.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img2"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img4"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img4">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">4</div>
<div class="content">
<img src="images/galerie/voltigeurs-4.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img3"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img5"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img5">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">5</div>
<div class="content">
<img src="images/galerie/voltigeurs-5.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img4"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img6"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img6">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">6</div>
<div class="content">
<img src="images/galerie/voltigeurs-6.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img5"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img7"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img7">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">7</div>
<div class="content">
<img src="images/galerie/voltigeurs-7.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img6"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img8"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img8">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">8</div>
<div class="content">
<img src="images/galerie/voltigeurs-8.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img7"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img9"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img9">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">9</div>
<div class="content">
<img src="images/galerie/voltigeurs-9.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img8"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img10"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img10">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">10</div>
<div class="content">
<img src="images/galerie/voltigeurs-10.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img9"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img11"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img11">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">11</div>
<div class="content">
<img src="images/galerie/voltigeurs-11.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img10"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img12"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
<div class="lightbox" id="img12">
<div class="box">
<a class="close" href="#">x</a>
<div id="legend">12</div>
<div class="content">
<img src="images/galerie/voltigeurs-12.jpg">
</div>
<!-- Previous Image Button -->
<a class="prev" href="#img11"><img src="images/hand_right_white.png" width="40px"></a>
<!-- Next Image Button -->
<a class="next" href="#img1"><img src="images/hand_left_white.png" width="40px"></a>
<div class="clear"></div>
</div>
</div>
非常感谢你的帮助。
答案 0 :(得分：0)
可能你想要这样的东西。
*{
margin:0;
padding:0;
}
#gallery{
border:1px solid red;
margin:auto;
width:500px;
padding:5px;
height:800px;
}
#thumbs{
width:150px;
height:150px;
border:1px solid green;
padding:5px;
float:left;
margin:5px;
}
#thumbs img{
width:100%;
height:100%;
}
.lightbox{
visibility:hidden;
opacity:0;
position:fixed;
top:0;
left:0;
background-color:rgba(72,73,74,1);
height:100%;
width:100%;
}
.lightbox:target{
visibility:visible;
opacity:1;
transition:opacity 2s;
}
#outer{
background-color:#FFF;
width:min-content;
height:400px;
margin:auto;
margin-top:30px;
box-shadow:0px 0px 35px #000000;
padding:10px;
}
#inner img{
max-height:500px;
max-width:800px;
}
.lightbox a{
text-decoration:none;
font-size:20px;
color:#666;
}
#cross{
float:right;
}
#next{
float:right;
}
<div id="gallery">
<div id="thumbs">
<a href="#lightbox1"><img src="img1.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox2"><img src="img2.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox3"><img src="img3.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox4"><img src="img4.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox5"><img src="img5.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox6"><img src="img6.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox7"><img src="img7.jpg"/></a>
</div>
<div id="thumbs">
<a href="#lightbox8"><img src="img8.jpg"/></a>
</div>
</div>
<div class="lightbox" id="lightbox1">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img1.jpg"/>
</div>
<p><a href="#lightbox2" id="next">Next</a>
<a href="#lightbox8" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox2">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img2.jpg"/>
</div>
<p><a href="#lightbox3" id="next">Next</a>
<a href="#lightbox1" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox3">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img3.jpg"/>
</div>
<p><a href="#lightbox4" id="next">Next</a>
<a href="#lightbox2" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox4">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img4.jpg"/>
</div>
<p><a href="#lightbox5" id="next">Next</a>
<a href="#lightbox3" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox5">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img5.jpg"/>
</div>
<p><a href="#lightbox6" id="next">Next</a>
<a href="#lightbox4" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox6">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img6.jpg"/>
</div>
<p><a href="#lightbox7" id="next">Next</a>
<a href="#lightbox5" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox7">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img7.jpg"/>
</div>
<p><a href="#lightbox8" id="next">Next</a>
<a href="#lightbox6" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox7">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img7.jpg"/>
</div>
<p><a href="#lightbox8" id="next">Next</a>
<a href="#lightbox6" id="prev">Previous</a></p>
</div>
</div>
<div class="lightbox" id="lightbox8">
<div id="outer">
<p id="title">Image
<a href="#" id="cross">X</a></p>
<div id="inner">
<img src="img8.jpg"/>
</div>
<p><a href="#lightbox9" id="next">Next</a>
<a href="#lightbox7" id="prev">Previous</a></p>
</div>
</div>
请查看以下视频： - https://www.youtube.com/watch?v=q7ZhOczh35A＆amp; https://www.youtube.com/watch?v=82SwGTvM_DU