详解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实现手风琴风格菜单具体步骤
May 06 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
怎么使 Mysql 数据同步
2006/10/09 PHP
php str_pad 函数用法简介
2009/07/11 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
python 进程池pool使用详解
2020/10/15 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
中年人生感言
2014/02/04 职场文书
学生生病请假条范文
2014/02/16 职场文书
新法人代表任命书
2014/06/06 职场文书
市场督导岗位职责
2015/04/10 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
python实现高效的遗传算法
2021/04/07 Python