.image-container {
    position: relative; /* 相对于此容器定位图标 */
    display: inline-block; /* 可以根据需要调整 */
}

.image-container img {
    display: block; /* 消除底部间隙 */
    width: 100%; /* 或你需要的任何宽度 */
    height: auto; /* 保持宽高比 */
}

.image-container .icon-top-left,
.image-container .icon-top-right,
.image-container .icon-bottom-left,
.image-container .icon-bottom-right {
    position: absolute; /* 绝对定位 */
    font-size: 12px; /* 根据需要调整图标大小 */
    color:white; /* 根据图片背景选择合适的颜色 */
    background: rgba(0, 0, 0, .6);
    border-radius: 5px;
    padding: 4px;
}

.image-container .icon-top-left {
    top: 15px; /* 距离容器顶部的距离 */
    left: 10px; /* 距离容器左边的距离 */
}

.image-container .icon-top-right {
    top: 15px;
    right: 10px; /* 距离容器右边的距离 */
}

.image-container .icon-bottom-left {
    bottom: 15px; /* 距离容器底部的距离 */
    left: 10px;
}

.image-container .icon-bottom-right {
    bottom: 15px;
    right: 10px;
}