本文详细介绍了CSS完成网页页面情况照片自融入全屏的方式，共享给大伙儿，实际以下：
网页页面情况自融入全屏.PNG
1张清楚好看的情况照片能给网页页面加分很多，设计方案师也常常会给网页页面的情况应用大图，大家既不想照片由于不一样辨别率照片形变，也不期待当在大屏的状况下，情况有1块露白，简而言之，便是完成能自融入显示屏尺寸又不容易形变的情况大图，并且情况照片不容易伴随着翻转条翻转而翻转。
下列是用CSS完成的方式：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf⑻"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
</head>
<body>
<div class="wrapper">
<!--情况照片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--别的编码 ... -->
</div>
</body>
</html>
CSS：
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:⑴0;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
下面，大家来剖析1下，css中每句编码的功效是甚么：
position:fixed; top: 0; left: 0;
这3句是让全部div固定不动在显示屏的最上方和最左方
width:100%; height:100%; min-width: 1000px;
上眼前两句是让全部div跟显示屏完成1模1样的尺寸，从而做到全屏实际效果，而min-width是以便完成让显示屏宽度在1000px之内时，div的尺寸维持不会改变，也便是说在这类状况下，放缩显示屏宽度时，照片不必放缩（仅有在1000px之内才合理）。
z-index:⑴0;
这个的目地是让全部div在HTML网页页面中各个等级的正下方，一切正常状况下，第1个建立的等级z-index的值是0，因此假如大家这里写成⑴还可以完成，但是这里写⑴0是保证全部div在最下面，由于假如网页页面中等级太多了，有的情况下用⑴不1定在最下面，但假如写成⑴00这样绝大多数字的也沒有甚么实际意义。用index:⑴0 以此能做到看上去像情况照片，实际上是1个最一般的div，只是等级关联变了，才令人看上去看是情况照片。
background-repeat: no-repeat;
上面这个是情况不必反复
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
上面3句是1个意思，便是让照片随显示屏尺寸同歩放缩，可是有一部分将会会被裁剪，但是不至于会露白，下面两句是为chrome和opera访问器作适配。
background-position: center 0;
上面这句的意思便是照片的部位，垂直居中，靠左对齐。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 小程序开发者工具_小程序在线生成平台_小程序编辑_免费的小程序_微信小程序在哪里 版权所有 （网站地图） 粤ICP备10235580号