所以我正在尝试制作一个图像,当您使用 :target
选择器单击它时,它的背景会淡入。 (类似于灯箱:http://lokeshdhakar.com/projects/lightbox2/,但仅限于 css)。
html:
<a href="#firstimg"><img src="img/thumb-3.jpg"></a>
<a href="#secondimg"><img src="img/thumb-4.jpg"></a>
<a href="#" class="lightbox" id="firstimg"><img src="img/image-3.jpg"></a>
<a href="#" class="lightbox" id="secondimg"><img src="img/image-4.jpg"></a>
CSS:
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
background: rgba(38, 38, 38, 0);
transition: background 0.3s ease;
}
.lightbox img {
max-height: 90%;
max-width: 70%;
margin: 3%;
border-radius: 5px;
border: 5px solid #cbcbcb;
}
.lightbox:target {
display: block;
background: rgba(38, 38, 38, 0.7);
}
唯一的问题:它不起作用。它尝试与其他元素一起使用,效果很好。有什么建议么?谢谢。
最佳答案
您的代码以某种方式工作,但尚未完成。我已经根据您的代码对其进行了改进,这是一个可以正常工作的跨浏览器和响应式 DEMO
仍在使用您的 :target
选择器。
关于html - 灯箱的 CSS 背景过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23031696/