css初学者实例教程之情况图填满全部显示屏

日期:2021-02-28 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

想让全部页面有1个情况照片,当然想起的是在body上加background,编码以下:

body {
     width:100%;
     height: 100%;
    /* 载入情况图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 情况图竖直、水均值垂直居中 */
    background-position: center center;
    /* 当內容高宽比超过照片高宽比时,情况图象的部位相对viewport固定不动 */
    background-attachment: fixed;
    /* 让情况图根据器皿尺寸伸缩 */
    background-size: cover;
    /* 设定情况色调,情况图载入全过程中会显示信息情况色 */
  background-color: rgba(41, 50, 39, 1);
}

发现body的高宽比为0,因此照片不可以显示信息;处理方法是给html设定宽高各100%,这样body就有值了,情况照片详细的填满全部显示屏。

拓展

url(images/beijing.png)——照片相对路径的部位;

no-repeat—— 照片不反复;

center 0px——center是间距网页页面左侧的精准定位,0px是间距网页页面上面的精准定位;

background-position: center 0——便是照片的精准定位,同上;

background-size: cover;——把情况图象拓展至充足大,以使情况图象彻底遮盖情况地区。情况图象的一些一部分或许没法显示信息在情况精准定位地区中;

min-height: 100vh;——视窗的高宽比,“视区”所指为访问器內部的可视性地区尺寸,即window.innerWidth/ window.innerHeight尺寸。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值,感谢大伙儿对脚本制作之家的适用。