鼠标移入移出给图片加蒙层

最新推荐文章于 2024-05-31 11:36:21 发布

指标满载

最新推荐文章于 2024-05-31 11:36:21 发布

阅读量764

点赞数

文章标签：蒙层图片加蒙层鼠标移入移出

本文链接：https://blog.csdn.net/weixin_44770377/article/details/105865133

版权

本文介绍了如何通过a标签结合CSS实现鼠标移入图片时添加蒙层的效果。关键在于将img设置为relative定位，并在a标签内放入一个绝对定位的div作为蒙层，设置适当的背景透明度。移入和移出图片时可以观察到明显的蒙层显示和隐藏变化。

摘要由CSDN通过智能技术生成

可用a标签实现，鼠标移入图片，添加蒙层
在img里写一个a标签，里面放蒙层div ，class=“mask”
重点是要对图片img设置position: relative;作为蒙层的定位父级原始。
蒙层 .mask设置定位和背景透明度： position: absolute; top: 0; left: 0;background: rgba(0, 0, 0, 0.5);

            <img :src="form.img"  width="100%" >
            <!--a标签自带的鼠标移入移除-->
            <a href="#">
              <!--蒙层-->
              <div class="mask" style="display: flex;align-items: center;justify-content: center;">
                <!--裁剪-->
                <el-button @click="openCropImgDialog" type="text" style="margin:0 10px;color: #fff;">
                  <i class="el-icon-crop" style="font-size: 24px;margin-bottom: 10px;"></i>
                  <div>点击后可按shift+A进行截取部分区域或者进行标注</div>
                </el-button>