详解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 27 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 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中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
使用js画图之画切线
2015/01/12 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
微信小程序自定义组件
2017/08/16 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
检察官就职演讲稿
2014/01/13 职场文书
大学毕业感言100字
2014/02/03 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
公司停电通知
2015/04/15 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python