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

手机网站制作软件宁波搜索引擎优化seo

news 2025/8/8 9:37:59

手机网站制作软件,宁波搜索引擎优化seo,全国公共资源交易平台官网,苏州工业园区建设主管部门网站未悬浮效果悬浮效果如果仅仅是添加绝对定位，那么遇到白色图片，就会看不到白色字体。通过遮罩（绝对定位透明度）就可以解决这个问题。 <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>