未悬浮效果

悬浮效果

如果仅仅是添加绝对定位，那么遇到白色图片，就会看不到白色字体。通过遮罩（绝对定位+透明度）就可以解决这个问题。

<script setup>
</script><template><div class="box"><el-image class="img" src="/public/p1.png"/><div class="mask"><div>删除</div></div></div>
</template><style lang="scss" scoped>css">
.box {height: 100px;width: 100px;position: relative;margin: 100px auto;.img {width: 100%;height: 100%;}.mask {height: 100%;width: 100%;position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.3);opacity: 0;transition: opacity .5s ease-in-out;cursor: pointer;color: #ffffff;}&:hover .mask {opacity: 1;}
}
</style>