摘要：一般我们需要设置一个与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。以前为了达到这样的等高效果，一般通过来获取当前浏览器高度然后动态设置的，有时候还需要不断地检测浏览器事件来不断调整的。
一般我们需要设置一个div与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示：
随着鼠标的滚动，整个图片也滚上去了。
以前为了达到这样的等高效果，一般通过js来获取当前浏览器高度然后动态设置div的height，有时候还需要不断地检测浏览器resize事件来不断调整div的height。
其实CSS自带的两个单位vw与vh就能支持与浏览器等高等宽的效果，完全可以抛弃js了！
演示效果
html代码如下:
全屏图片
我就是这么屌
相信方今不再会有人质疑手机仅仅只是一个纯粹的通讯工具，随着移动社交应用日渐成为生活中不可缺少的工具，手机的照相功能表现甚至成为了衡量一部手机好坏的关键指标。在绝大部分的旗舰级手机新品发布会之中，我们经常可以看到各厂商们在介绍自家旗舰级机型拍照能力之时自吹自捧得无可匹敌，但我们深知在这些顶级水平的旗舰级手机当中，仍然需要使用真正的实力去决一胜负，而这正是本文的主要任务。
本文我们选择了四款旗舰机型，当中分别有索尼 Xperia Z5 Premium 、苹果 iPhone 6s Plus、 三星 Galaxy S6 Edge+、谷歌 Nexus 6P。
css核心代码如下
.fullbg {
position: relative;
width: 100vw;
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111261.html
摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。 公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。 研究了一下，...
摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。 公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。 研究了一下，...
摘要：灵活的背景定位灵活的背景定位实现效果将背景图定位到距离容器底边且距离右边的位置。棋盘实现效果实现代码关键样式其它样式伪随机背景伪随机背景实现效果重复平铺的几何图案很美观，但看起来可能有一些呆板。灵活的背景定位 实现效果： 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置。 background-position 方案 实现代码： 海盗密码 div { /* 关键样...
css3新增选择器 属性选择器 包括h5中新增的自定义属性 p[data-id]{color: red} sasas 属性选择器可以指定属性值 的样式变化 E[attr=value] 指定属性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才会...
摘要：要实现这一点，必须规定两项内容指定要添加效果的属性指定效果的持续时间。当动画完成后，保持最后一个属性值在最后一个关键帧中定义。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。 1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但...
阅读 1080·2021-10-11 10:57
阅读 1857·2021-09-02 15:15
阅读 1397·2019-08-30 15:56
阅读 999·2019-08-30 15:55
阅读 1034·2019-08-30 15:44
阅读 875·2019-08-29 12:20
阅读 1169·2019-08-29 11:12
阅读 959·2019-08-28 18:29
