详解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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php目录操作实例代码
2014/02/21 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
php报错502badgateway解决方法
2019/10/11 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
use jscript List Installed Software
2007/06/11 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python数组循环处理方法
2019/08/26 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
车间班组长的职责
2013/12/13 职场文书
财务总监管理职责范文
2014/03/09 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
平安建设汇报材料
2014/12/29 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书