详解CSS3原生支持div铺满浏览器的方法


Posted in HTML / CSS onAugust 30, 2018

一般我们需要设置一个div与浏览器等高并等宽充满全屏,然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示:

详解CSS3原生支持div铺满浏览器的方法

随着鼠标的滚动,整个图片也滚上去了。

以前为了达到这样的等高效果,一般通过js来获取当前浏览器高度然后动态设置div的height,有时候还需要不断地检测浏览器resize事件来不断调整div的height。

其实CSS自带的两个单位vw与vh就能支持与浏览器等高等宽的效果,完全可以抛弃js了!

html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>全屏图片</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        .fullbg {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .inner-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="fullbg" style="background-image: url('http://s.dgtle.com/portal/201601/08/180115ol7n5o75zy7hm002.jpg?szhdl=imageview/2/w/1900');">
        <div class="inner-content">
            <h1>我就是这么??lt;/h1>
        </div>
    </div>
    <div class="entry-content">
        <p>
            相信方今不再会有人质疑手机仅仅只是一个纯粹的通讯工具,随着移动社交应用日渐成为生活中不可缺少的工具,手机的照相功能表现甚至成为了衡量一部手机好坏的关键指标。在绝大部分的旗舰级手机新品发布会之中,我们经常可以看到各厂商们在介绍自家旗舰级机型拍照能力之时自吹自捧得无可匹敌,但我们深知在这些顶级水平的旗舰级手机当中,仍然需要使用真正的实力去决一胜负,而这正是本文的主要任务。
        </p>
        <p>
            本文我们选择了四款旗舰机型,当中分别有索尼 Xperia Z5 Premium 、苹果 iPhone 6s Plus、 三星 Galaxy S6 Edge+、谷歌 Nexus 6P。
        </p>
    </div>
</body>
</html>

css核心代码如下

.fullbg {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 #HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 #HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 #HTML / CSS
CSS3实现可翻转的hover效果
May 23 #HTML / CSS
You might like
实用函数2
2007/11/08 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
解决laravel session失效的问题
2019/10/14 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Vue中props的详解
2019/05/16 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
广播体操口号
2014/06/18 职场文书
服务理念标语
2014/06/18 职场文书
教师节活动总结
2014/08/29 职场文书
法定代表人资格证明书
2015/06/18 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android