首页 > 其他分享 >css实现video视频背景色变透明

css实现video视频背景色变透明

时间:2023-05-31 14:55:52浏览次数:64  
标签:视频 透明 背景色 mix video css

利用css样式 mix-blend-mode 混合模式,有一个属性 screen ,就是黑色和其它元素进行混合的时候表现为透明。

于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:

video {
    mix-blend-mode: screen;
}

参考原文:如何让MP4 video视频背景色变成透明

 

 

标签:视频,透明,背景色,mix,video,css
From: https://www.cnblogs.com/hyt09/p/17446067.html

相关文章

  • CSS九种选择器你知道吗?
    表格table-相关标签:table表格,tr表示行,td表示列,th表头,caption表格标题-相关属性:border设置边框,rowspan跨行colspan跨列 表单form-作用:获取用户输入的内容,并提交给服务器-相关文本框:inputtype=text、password,radio,checkbox,date,file,select[......
  • CSS 删除线:在 CSS 中使用文本装饰和划线
    CSS删除线是一个CSS属性,它使文本看起来像是被删除线一样,就像这样。在网络开发和写作中,这经常用于表示文本已被删除或不再相关。但它也可以用于不同的事情。删除线可以应用于span元素、段落、div、显示内联块或任何其他需要文本修饰的元素。除了下划线、斜体和粗体,CSS删除线也......
  • Tailwind CSS与写全局样式的优势
    TailwindCSS是一个基于原子类的CSS框架,它提供了一系列的CSS类,可以用来快速构建网页界面。与传统的CSS框架不同,TailwindCSS不是提供一些预定义的样式,而是提供了一系列的原子类,诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,这些原子类可以组合使用,从而构建......
  • css 动画3d旋转案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>body{perspective:500px;}.box{posit......
  • css 动画 keyframes
    动画是CSS3中最具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果.相比较过渡效果,动画可以实现更多变化,更多控制,连续播放等效果.动画的基本使用:步骤分为两步:1.定义动画2.调用动画一.定义动画(类似定义类选择器)@keyframesmov......
  • css rotate翻转图像案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.box{position:relative;width:300px;heig......
  • 前端开发如何更好的避免样式冲突?级联层(CSS@layer)
    作者:vivo互联网前端团队-ZhangJiqi本文主要讲述了CSS中的级联层(CSS@layer),讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突,提高代码可读性和可维护性。一、什么是级联层(CascadeLayers)?1.1级联层的官方定义我们参看Cascadingand......
  • JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
    在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。(1)html页面视频标签大体如下<videoid="v......
  • tailwindcss在使用cdn引入静态html的时候,使用vscode代码提示
    原文:Hey!TheIntellisenseextensiondoesneedaconfigfiletoworktoday.Iwouldsuggestcreatingoneinyourprojectroottoenabletheextension.Anemptyfilewillworkjustfineforthiscaseifthedefaultssuityourneeds.Ifyouwanttocustomiz......
  • css实现文本超出固定行数显示...和展开收起
    文本超出固定行数显示...和展开收起项目中有时需要实现文字超出末尾显示…和展开收起按钮的需求,在我用js限制字符数实现之后,又去找了大佬用css实现的方法,发现这样更满足我的需求且更简单。思路:float可以实现文字环绕效果判断展开收起的状态,可以使用复选框和伪元素结合实现复选......