video设置mix-blend-mode后造成的问题
在项目,有个业务需要展示一个视频,video标签设置src后,发现一个1个,视频下方有一块黑色的,百度后,对视频进行样式处理,增加【mix-blend-mode:screen】,这一加,就造成了2个问题,经过排查,这2个问题都跟transform有关:
问题1:视频设置mix-blend-mode后,页面变得有点模糊,不够清晰;
问题2:视频设置mix-blend-mode后,视频下方还是有黑色块(偶现,有些地方没有);
经过排查,造成以上问题是因为父(祖先)元素设置transform导致的,
解决方法1:translateX、translateY都改成left和top的写法。
解决方法2:增加z-index层级,这样它的模糊只会影响自己范围内的,不会影响整个页面。
使用的是谷歌浏览器。
还有其他解决方式的,mix-blend-mode导致其他问题的,欢迎补充。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库