制作带有缩略图的图片展示效果，可以使用CSS中的flexbox布局和伪元素来实现。
首先，需要将图片展示区域和缩略图区域放在一个flex容器中，使用flexbox布局进行对齐和排列。
.container {
display: flex;
align-items: center;
justify-content: center;
}然后，在缩略图区域的外部包裹一个相对定位的容器，并在容器中使用绝对定位的伪元素来实现缩略图的效果。
.thumbnail-container {
position: relative;
}
.thumbnail-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(thumbnail.jpg); // 缩略图的路径
background-size: cover;
opacity: 0.5;
z-index: -1;
}最后，需要设置图片展示区域的宽度和高度，并将其z-index设置为较高的值，以保证图片展示在缩略图之上。
.image-container {
width: 500px;
height: 500px;
position: relative;
z-index: 1;
}完整的代码如下：
.container {
display: flex;
align-items: center;
justify-content: center;
}
.thumbnail-container {
position: relative;
}
.thumbnail-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(thumbnail.jpg); // 缩略图的路径
background-size: cover;
opacity: 0.5;
z-index: -1;
}
.image-container {
width: 500px;
height: 500px;
position: relative;
z-index: 1;
}使用时，将图片和缩略图的HTML代码放在容器中即可。
<div class="container">
<div class="thumbnail-container"></div>
<div class="image-container">
<img src="image.jpg" alt="Image">
</div>
</div>效果如下：
2023-05-09 15:12:50 更新
相关推荐
其他工具