真·半透明按钮需用rgba()设背景透明而文字保持不透明：background-color: rgba(0,0,0,0.4)；清除border、padding默认值；加position:absolute与z-index确保叠在视频上；video需设background: transparent防遮挡。
直接用 opacity 会让按钮文字也变淡，这不是真·半透明按钮；真正可用的方案是把背景和文字拆开控制——背景用 rgba() 或 transparent，文字保持 100% 不透明。
button 背景设为半透明但文字不透明
关键不是调 opacity，而是重置默认样式 + 独立控制背景色透明度：
- 必须显式设置
background-color: rgba(0, 0, 0, 0.4)（或hsla(0, 0%, 0%, 0.4)），不能只靠opacity - 移除浏览器默认边框：
border: none或border: 1px solid rgba(255, 255, 255, 0.2) - 清除默认内边距：
padding: 0，否则rgba背景会被撑开、显得不紧凑 - 加
color: white和font-weight: bold保证文字在暗色视频上可读
按钮悬浮时背景加深/变浅的实现
用 :hover 切换 rgba() 的 alpha 值即可，比 opacity 更精准：
-
background-color: rgba(0, 0, 0, 0.3);→:hover { background-color: rgba(0, 0, 0, 0.6); } - 务必加
transition: background-color 0.2s ease;，否则切换生硬 - 避免用
opacity动画：它会连同图标、文字一起淡入淡出，破坏可读性
按钮叠加在视频上不被遮挡的关键点
视频层和按钮层的堆叠顺序稍有不慎就会失效：
- 视频容器（如
.video-container）必须设position: relative - 按钮本身要
position: absolute，并用top/left定位，不能依赖文档流 - 确保按钮的
z-index大于视频元素（z-index: 10足够，视频默认是auto） - 如果按钮消失，先检查是否漏了
position——z-index在非定位元素上完全无效
最易忽略的是：视频未加载完成时，<video></video> 默认渲染黑底，会盖住按钮。务必加 background: transparent 到 video 标签上，否则按钮可能在首帧前“闪一下再出现”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
