今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图。

如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最快。

  1. 左侧放在框里的视频由两层实现
  2. 一层为背景图,一层为视频,一开始刚好卡住,当屏幕宽度变化时要适配,最好不要媒体查询适配大小

可以尝试一波 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百分比自适应的更多相关文章

  1. 问题二:appium 搞定权限弹框的一个小办法

    public void permission() { for (int i=0; i <= 10; i++) { if (getPageSource().contains("允许&qu ...

  2. opencv实现坐标旋转(教你框住小姐姐)

    一.项目背景 最近在做一个人脸检测项目,需要接入百度AI的系统进行识别和检测.主要流程就是往指定的URL上post图片上去,之后接收检测结果就好了. 百度的检测结果包含这样的信息: left - 人脸 ...

  3. 没有内涵段子可以刷了,利用Python爬取段友之家贴吧图片和小视频(含源码)

    由于最新的视频整顿风波,内涵段子APP被迫关闭,广大段友无家可归,但是最近发现了一个"段友"的app,版本更新也挺快,正在号召广大段友回家,如下图,有兴趣的可以下载看看(ps:我不 ...

  4. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  5. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  6. jquery EsayUi 里一个小弹框

    网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...

  7. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  8. hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  9. easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法

    easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...

随机推荐

  1. java实验题目

    1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 实验源码: public class number1 { publi ...

  2. gdb移植(设备端本地版本)

    Gdb下载地址:http://ftp.gnu.org/gnu/gdb/ ncurse下载地址:http://ftp.gnu.org/pub/gnu/ncurses/ 目录结构如下: ├── insta ...

  3. provider: Shared Memory Provider, error: 0 - No process is on the other end of the pipe.

    通常情况下,要解决这个,你去SQL Server配置管理器(SSCM)和: [1]在SSCM中设置 [1.1]确保共享内存协议启用 [1.2]确保命名管道协议 [1.3]确保TCP / IP被启用,和 ...

  4. SQLite进阶-9.别名

    我们可以暂时给表或者列重命名为另一个名字,称为别名,重命名只是临时运行时改变,不会改变数据库中的实际的名字. -- 语法 SELECT column_name AS column_alias_name ...

  5. #import "msado15.dll" no_namespace rename("EOF","adoEOF")

    引入动态链接库msado15.dll的信息, no_namespace--无命名空间 rename(“EOF”,“adoEOF”)--把文件结束符“EOF”,更换成“adoEOF”

  6. linux内核编程入门 hello world

    注意: Makefile 文件的命名注意M需要大写,否则会报错. 在Makefile文件中make命令前应为tab制表符. 下文转载至:https://blog.csdn.net/bingqing07 ...

  7. 【原创】运维基础之Amplify

    官方:https://www.nginx.com/products/nginx-amplify/ NGINX Amplify is a SaaS‑based monitoring tool for t ...

  8. Extjs中,Vo对象中的属性无法在data中获取的解决方法

    store.getById(data.data.id).raw.redpackid

  9. django 上传路径至vue处理组件加载

    1,在主目录(项目目录)下新建中间件middleware.py文件 写入 from django.utils.deprecation import MiddlewareMixin from djang ...

  10. Linux之用户相关操作

    1. 创建用户 useradd -m wolf #即创建一个用户并且创建同名的家目录 2. 设置密码 passwd wolf