水印被媒体.图片遮挡，vue3水印指令-(应用篇)

最新推荐文章于 2024-05-17 09:39:23 发布

一行代码上晴天

最新推荐文章于 2024-05-17 09:39:23 发布

阅读量380

点赞数 4

文章标签：媒体前端 javascript

本文链接：https://blog.csdn.net/qq_48850466/article/details/127761498

版权

接上篇，封装指令后可以用，没毛病。可是它被我的视频播放器给遮挡了，看了下水印实际是cavas 64得背景图。想到提升背景图得层级，鼠标又能正常播放视频。

思路：带有水印得提高层级，给加上 pointer-events: none;消除层级提高影响原来的效果功能

上代码：这是一个dom

<div class="father">
  <video src=""></video>
  <div class="child" v-waterMarker="{text: 'Watermark Direct',textColor: 'rgba(180, 180, 180, 0.6)'}"></div>
</div>


<style>
.father{
  position: relative;
  width: 400px;
  height: 500px;
}
.child{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none; /* 此属性使鼠标不会捕获当前dom，而是捕获dom得下一层; */
}
</style>