详解CSS3原生态适用div铺满访问器的方式

日期：2021-03-01 类型：科技新闻 

关键词：怎么把小程序变成二维码，微信小程序怎么开通，微信小程序csdn，小程序开发，网络答题小程序

1般大家必须设定1个div与访问器等高并等宽填满全屏，随后设定情况照片来做到1个伟岸上的排版实际效果。实际的事例看下面的照片演试：

伴随着电脑鼠标的翻转，全部照片也滚上去了。

之前以便做到这样的等高效率果，1般根据js来获得当今访问器高宽比随后动态性设定div的height，有时还必须持续地检验访问器resize恶性事件来持续调剂div的height。

实际上CSS自带的两个企业vw与vh就可以适用与访问器等高宽的实际效果，彻底能够抛下js了！

html编码以下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf⑻">
    <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(⑸0%, ⑸0%);
            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>我便是这么屌</h1>
        </div>
    </div>
    <div class="entry-content">
        <p>
            坚信方今已不会有人提出质疑手机上仅仅只是1个纯碎的通信专用工具，伴随着挪动社交媒体运用日渐变成日常生活中不能缺乏的专用工具，手机上的拍照作用主要表现乃至变成了考量1部手机上优劣的重要指标值。在绝绝大多数的旗舰级手机上新品公布会当中，大家常常能够看到各厂商们在详细介绍自家旗舰级机型照相工作能力之时自吹自捧得没法媲美，但大家深知在这些顶级水平的旗舰级手机上之中，依然必须应用真实的整体实力去决1输赢，而这更是本文的关键每日任务。
        </p>
        <p>
            本文大家挑选了4款旗舰机型，之中各自有索尼 Xperia Z5 Premium 、iPhone iPhone 6s Plus、 3星 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;
}

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：css画1个棒棒糖的案例编码 返回下一篇：没有了