当前位置：首页 > news >正文

wordpress编写页面代码长沙优化科技有限公司

news 2025/7/8 6:24:28

wordpress编写页面代码,长沙优化科技有限公司,个人怎么建设网站,汕头企业网站未悬浮效果悬浮效果如果仅仅是添加绝对定位，那么遇到白色图片，就会看不到白色字体。通过遮罩（绝对定位透明度）就可以解决这个问题。 <script setup> </script><template><div class"box"><…

未悬浮效果

在这里插入图片描述

悬浮效果

在这里插入图片描述

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

<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>
.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>