如何在多个图像上叠加图标图像？
提问于 2020-12-08 08:47:41
我需要在现有图像的基础上添加一个扩展图标。该图像显示为缩略图，并在单击时展开。展开图标表示图像是可点击的。我有下面的实现，但这并不理想。如果我不必在每一张图片上添加<img src="expand-icon.png" class="img-expand" />，那就太好了。我尝试使用::after属性添加图标，但是图标是不可点击的，位置结束在图像下方，而不是顶部。
<div class="thumbnail-container">
<img src="my-image-that-will-expand-when-clicked.png" class="thumbnail" />
<img src="expand-icon.png" class="img-expand" />
</div>CSS
.thumbnail {
thumbnail-max-height: auto;
thumbnail-max-width: 500px;
thumbnail: popup;
padding: 10px;
position: relative;
top: 0;
left: 0;
}
.thumbnail-container {
display: table-cell;
border: 1px solid #858383;
border-radius: 9px;
position: relative;
}
.img-expand {
position: absolute;
bottom: 5px;
right: 5px;
max-width: 20px;
pointer-events: none
}还有一个在后台运行的JS脚本。我无法访问该脚本，该工具在后台运行它。
回答 1
Stack Overflow用户
发布于 2020-12-08 09:10:38
可以像您在问题中所说的那样，使用::after添加展开图标。这听起来是个不错的方法。它不起作用的原因要么是因为定位不好，要么是因为没有显示内容。
记住设置content: "";或content: url(...);，然后在伪元素中设置pointer-events: all;。
下面是一个示例：
.thumbnail::after {
content: url(expand-icon.png);
pointer-events: all;
/* set size and position however you like... */
}但是，使用这种方法，您的伪元素仍然是not clickable，您将不得不管理整个映像的单击事件，因为无法在图像和其子伪元素之间进行区分。
您可以使用空的span或div元素，并将它们定位为可单击的区域，但此时您已经做得太过了。
最后，如果你必须只点击按钮，使用伪元素是不容易的，你必须使用当前的设置来处理两个图像。
一个优雅的解决方案，是使用伪元素，并使整个图像可点击。或者，如果您希望它的一部分是可点击的，您可以使用map，但我建议不要这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65203216
复制相关文章
![[答疑]人翻书，翻书的操作是在人上还是书上](https://ask.qcloudimg.com/http-save/yehe-6288414/lkuegum6ts.png)
腾讯云开发者
