图片框住一个小视频 谈css padding百分比自适应
今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图。
如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最快。
- 左侧放在框里的视频由两层实现
- 一层为背景图,一层为视频,一开始刚好卡住,当屏幕宽度变化时要适配,最好不要媒体查询适配大小
可以尝试一波 css padding 百分比的魔法了
以下实现代码:
<div class="desc-1 iphone-box hover">
<img class="iphone" src="/assets/plsv/img-phone-3cf540ac5d957bf4662c51c149eb7f6ecffee82a2f629d38eebc6f00d2578b88.png" alt="Img phone">
<div class="video-box">
<video loop autoplay poster="" src="https://odum9helk.qnssl.com/lmJftwXMqXYw4wcLzZvwwT34llim"></video>
</div>
</div>
css :
.iphone-box {
padding: 171% 0 0;
position: relative;
img.iphone {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 26.7% 0 0;
video {
width: 100%;
height: 100%;
}
}
- 图片的父级元素 是没有宽高,设置
padding
占位, - 父元素设置
position:relative;
- 子元素设置
position:absolute;
- 父元素将子元素包裹
- 父元素
padding
设置为百分比 - 子元素的宽高随着父元素宽的变化 等比变化,不会出现
cover
形式的截图 - 由此叠在父元素里面的两层的相对位置就比较稳定
padding
的比例要符合一个计算规则(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width
当然也可以看着顺眼调就好了
图片框住一个小视频 谈css padding百分比自适应的更多相关文章
- 问题二:appium 搞定权限弹框的一个小办法
public void permission() { for (int i=0; i <= 10; i++) { if (getPageSource().contains("允许&qu ...
- opencv实现坐标旋转(教你框住小姐姐)
一.项目背景 最近在做一个人脸检测项目,需要接入百度AI的系统进行识别和检测.主要流程就是往指定的URL上post图片上去,之后接收检测结果就好了. 百度的检测结果包含这样的信息: left - 人脸 ...
- 没有内涵段子可以刷了,利用Python爬取段友之家贴吧图片和小视频(含源码)
由于最新的视频整顿风波,内涵段子APP被迫关闭,广大段友无家可归,但是最近发现了一个"段友"的app,版本更新也挺快,正在号召广大段友回家,如下图,有兴趣的可以下载看看(ps:我不 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- jquery EsayUi 里一个小弹框
网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
- easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法
easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...
随机推荐
- Hive概述
HIVE是什么 开发调试麻烦 只能用java开发 需要对hadoop的底层及api比较了解才能开发复杂代码 HQL Hive是基于Hadoop的一个数据仓库工具.可以将结构化的数据 ...
- getopts的使用 + 创建空目录
1.getopts的经典例子 isRollback= rollbackVer="" targetGroup="" actionType="" ...
- English 邮件
1.email http://www2.elc.polyu.edu.hk/cill/eiw/e-mail.htm
- linux文件权限更改命令chmod及数字权限实践总结
改变权限属性命令chmod chmod 是用来改变文件或目录权限的命令,但只有文件的属主和超级用户root才有这种权限.通过chmod来改变文件或目录的权限有两种方法:一种是通过权限字母和操作符表达 ...
- inxi 查看国产服务器的硬件配置信息
下载inxi 查看国产服务器的信息 https://codeload.github.com/smxi/inxi/tar.gz/3.0.35-1 注意查看命令是 ./inxi -F 2. 直接是二进制包 ...
- P1373 小a和uim之大逃离(DP)
(点击此处查看原题) 题意 中文题,题意看题面吧. 解题思路 注意到我们只能向右和下移动,由此想到开二维的dp数组dp[i][j],代表当前所在位置 我们需要让两人取数的差值为0,由于起点和走法的不同 ...
- linux终端命令(四)系统信息相关命令(五)其他命令
四.系统信息相关命令 时间和日期 date cal 磁盘和目录空间 df du 进程信息 ps top kill 1.时间和日期 序号 命令 作用 01 cal 查看日历,-y选项可以查看一年的日历 ...
- jenkins+docker+git+etcd实现应用配置文件管理
两台机器: 一台机器安装gitlab: http://www.cnblogs.com/cjsblogs/p/8716932.html 另一台机器安装etcd+docker+jenkins jenkin ...
- Codeforces 1240A. Save the Nature
传送门 显然可以二分答案 如果知道卖的票数,那么就能算出有多少 $a$ 倍数但不是 $b$ 倍数的位置,多少 $b$ 倍数但不是 $a$ 倍数的位置,多少既是 $a$ 又是 $b$ 倍数的位置 然后贪 ...
- LintCode 547---两数组的交集
public class Solution { /** * 给出两个数组,写出一个方法求出它们的交集 * @param nums1: an integer array * @param nums2: ...