如何让文字悬浮在视频上方？

最新推荐文章于 2022-09-23 11:53:19 发布
最新推荐文章于 2022-09-23 11:53:19 发布
阅读量8.6k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38313970/article/details/80667675
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
     <style type="text/css">
.container{
margin-top:-350px;
margin-left:20%;
font-size:50px;

}
 
 
.bg{
margin-left:80px;
}
 
.play{
 
background-image: url(img/pk.png);
}
</style>


<body>




<section class="video">


<div class="bg">
<video id="bgvideo" controls autoplay>
<source type="video/mp4" src="img/ss.mp4"></source></video>
</div>


<div class="filter"></div>
<div class="container">
<div>
<div class="t5">跨越HTML5的技术界限</div>



<a href="https://www.baidu.com/" rel="nofollow">
<image src="img/play.png" ></image>
</a>
</div>
</div>




</section>




</body>
</html>
weixin_38313970
关注
CSS 3.0实现视频字幕悬停特效
越陌度阡
05-30 542
给大家分享一个用CSS实现的字幕悬停特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta .
剪映新手必看！剪映如何实现图片/视频在文字上显示（剪映如何实现图片/视频轨道在文字轨道之上显示/剪映如何实现自由轨道/层级）
最新发布
XiaoqiangClub的博客
08-14 275
剪映新手必看！剪映如何实现图片/视频在文字上显示（剪映如何实现图片/视频轨道在文字轨道之上显示/剪映如何实现自由轨道/层级）
HTML层问题之如何能将文字至于视频上面？
qq_37555524的博客
09-18 6292
先看HTML代码，试想如何能将文字至于视频上面？ <div><embed src=”http://www.tudou.com/v/UUZqjxo_WLI” type=”application/x-sh...
css3把文字附在视频上方_6 HTML CSS访谈Q以及文字和视频说明
weixin_26748921的博客
09-12 1329
css3把文字附在视频上方In this article, I will present some of the most frequent questions and answers made by interviewers. There will be questions about HTML & CSS. If you like reading, go ahead. If you d...
vue-video-player视频播放及全屏添加信息在视频上
chunchun_H
05-20 3377
一、vue-video-player实现视频播放 安装vue-video-player插件vue-video-player和videojs-contrib-hls后者是播放播放m3u8格式视频流。 在main.js中引入注入到全局const hls = require("videojs-contrib-hls") ;Vue.use(hls) 将css文件引入import "video.js/dist/video-js.css";import "vue-video-player/src/custom-the
DIV浮在视频之上解决方法
咕噜咕噜鱼的博客
01-22 1414
最近做一个网站，要实现的效果是网站顶部有个DIV层一直置顶，CSS样式是这样写的： ? 1 2 3 4 5 6 7 8 9 10 #header-top{ width:100%; border-top: 2px solid #49C5FF; z-index:99
我们一起学：HTML5标签系列教程（一）-video标签
热门推荐
张旭乾 - 全栈工程师/海归
09-05 1万+
前言 做为一个程序员，无论是前端还是后端，我们都需要不断的更新自己的技术能力，掌握未来的发展趋势。每当一个新的技术出现时，我们要充分调动自己的求知欲，尽可能快的先掌握它，这样才不致被淘汰。这套系列教程是我一边学，一边记录下来和大家分享的，也不算是教程，因为我也是初学者，所以有什么错误请大家帮我指出来，也希望跟我一样是初学者的同学们一起学习。 简介 在HTML5标签系列教程里，每篇文章会介绍一
Android 仿快播搜索框上方悬浮的文字搜索源码.rar
07-04
快播是中国早期流行的视频播放软件，其搜索框设计独特，用户在输入文字时，搜索框会悬浮在屏幕上方，方便用户在观看视频的同时进行搜索。这个开源项目提供了实现这种功能的源代码，对Android开发者来说，是一个学习...
Android 仿快播搜索框上方悬浮的文字搜索源码.zip
12-04
快播是一款知名的视频播放器，其搜索框的设计独特，具有在屏幕上方悬浮且跟随用户操作移动的特点，这种设计在用户交互上提供了便利性。 源码主要使用了Java语言编写，这是Android平台的标准开发语言。通过分析和...
HTML+CSS项目实践九——设置网站导航栏悬浮在网页最上面
王迪
09-25 7550
实现原理参照：HTML+CSS项目实践六：HTML中设置文字浮在图片上方的两种方法（背景图片法、DIV+CSS定位法）
img 在video上面_HTML,img,video无法铺满屏幕解决方法，同视频做网页背景无法全屏的解决方法...
weixin_39756895的博客
12-31 419
我在这里用视频做为网页背景，给视频设了100%宽高，在firebug也显示video的宽高和页面是一样的，但是效果却没出来，视频没有铺满屏幕。下面是我的代码(原代码，错误的)*{margin: 0;padding: 0}html,body{width: 100%;height: 100%}video{width: 100%;height: 100%;}src="public/webm/v_002....
[html] html5的video如何附带字幕？
歌谣的博客
04-07 607
[html] html5的video如何附带字幕？ <video controls width="400" height="300"> <source src="../hangge.mp4" type="video/mp4"> <track src="hangge.vtt" srclang="zh" kind="subtitles" label="中文" default> <track src="hangge_en.vtt" srclang="en" kind="
html覆盖video,覆盖HTML5视频上的元素(Overlaying elements over HTML5 video)
weixin_30994671的博客
06-09 1383
覆盖HTML5视频上的元素(Overlaying elements over HTML5 video)我对CSS和HTML5比较陌生，想看看如何在视频上叠加HTML文本或其他元素。 我继承并修改了某人的代码，当我在JSFiddle上玩它时它似乎正常工作 - https://jsfiddle.net/jxavLps5/但是当我通过我的本地瓶子(WSGI)托管时我无法正常工作服务器 。 我有以下HTM...
如何在HTML里加载摄像头
m0_51082586的博客
09-29 966
效果图： 整体效果: 视频加载： 拍照： 第一步：创建HTML元素 首先，我们要创建一个HTML5的文档。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html> 然后在<body></body>插入以下
video播放视频时配置字幕的实现方法
丰云 之 薪火
06-26 7582
项目里有很多视频资料，现在客户需要给给这些视频资料添加字幕解说。 网上查了不少资料，终于简单实现了这个效果。 /* 直接给字幕标签加样式是无效的，必须以下面的方法给样式。*/ /* 由于google chrome和firefox的字幕默认样式是黑色背景，效果难看，因此需要样式调整 */ video::cue{ background-color:transparent; col...
uni-app video标签浮在最上层的问题
qq_60035188的博客
09-23 3048
android video标签浮在最上方 uniapp video浮在最上方
vue中实现视频直播（萤石云）/实时视频:
SunPeng的博客
08-23 8284
vue中实现视频直播（萤石云）/实时视频:
CSS特效--视频字幕浮现
weixin_52283867的博客
05-26 386
基本原理 这里首先我们要学会怎么使用transition+transform-origin+transform 举个例子： <div class="b"> <div class="box"></div> </div> .b{ width: 300px; height: 300px; background-color: springgreen;
echart折线图如何让悬浮框出现在左侧？
05-28
要让 ECharts 折线图中的悬浮框出现在左侧，可以通过设置 tooltip 的 position 属性来实现。具体来说，可以将 position 的值设置为 `'right'`，并在此基础上再通过设置 axisPointer 的 type 属性为 `'line'`，并将 label 的 position 属性设置为 `'top'` 来实现。示例代码如下： ``` option = { tooltip: { trigger: 'axis', position: 'right', axisPointer: { type: 'line' }, formatter: '{b} : {c}' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; ``` 在上面的代码中，我们通过设置 tooltip 的 position 属性为 `'right'`，并将 axisPointer 的 type 属性设置为 `'line'`，来让悬浮框出现在光标的右侧。同时，我们还将 label 的 position 属性设置为 `'top'`，来让悬浮框的标签在光标的上方。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值