详解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中新增的样式使用示例附效果图
Aug 19 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 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
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php中的观察者模式简单实例
2015/01/20 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python 全文检索引擎详解
2017/04/25 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
学Python 3的理由和必要性
2019/11/19 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
中学生自我鉴定
2014/02/04 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
安全宣传标语口号
2014/06/06 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
团队拓展训练心得体会
2016/01/12 职场文书