.Head{
background-image: url("../../Img/PersonalCenter/banner.png");
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: calc(41vw + 25px);
background-color:white;
text-align:center;
}

  

描述 背景图片高313px 宽750px,高宽占比约为41%

元素为了能够让背景宽度100% 高度自适应且高度为完全显示背景图片后多余25像素显示其他内容。特地设置Head的高度为 calc(41vw + 25px) 41vw 为屏幕像素宽度的41%

 

效果:

记一则css3计算的更多相关文章

  1. css3计算属性(calc)

    如果有固定头部高度和底部高度,内容的高度或者宽度想要根据浏览器屏幕自适应的话,可以用到css3的计算属性,即calc. 用法如下: 内容区域高/宽 = calc(100% - 头部高宽 - 底部高宽) ...

  2. css3 vw -----解决页面滚动出现跳动的bug

    100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度. demo: h1{font-size:8vw;} ...

  3. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  4. Oracle 哈希连接原理

    <基于Oracle的sql优化>里关于哈希连接的原理介绍如下: 哈希连接(HASH JOIN)是一种两个表在做表连接时主要依靠哈希运算来得到连接结果集的表连接方法. 在Oracle 7.3 ...

  5. 【体系结构】动态调度算法:记分牌算法和tomasulo算法

    记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...

  6. Front End Developer Questions 前端开发人员问题(二)CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  7. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  8. [No00000F]Excel快捷键大全 Excel2013/2010/2007/2003常用快捷键大全

    一个软件最大的用处是提高工作效率,衡量一个软件的好坏,除了是否出名之外,最主就是能否让一个新手更快的学会这个软件和提高工作速度.就拿Excel表格来说吧,平常办公中我们经常会用它来制作表格,统计数据或 ...

  9. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

随机推荐

  1. linux 系统优化+定时任务

    安装软件 通过yum安装 自动补全工具:yum completion yum install -y tree bash-completion wget vim find -[TAB] 更改系统的yum ...

  2. maven报错【Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of】

    [自己的操作] (1)windows -> Preferences -> maven 的settings.xml文件中.m2的位置已经失效,更改正确后尝试 (2)pom.xml还有下面错误 ...

  3. mongodb查询(转载)

    1.  基本查询:    构造查询数据.    > db.test.findOne()    {         "_id" : ObjectId("4fd58ec ...

  4. String.format()格式化日期(2)

    在以前的开发中,日期格式化一直使用的是SimpleDateFormat进行格式化.今天发现String.format也可以格式化.当 然,两种方式的优劣没有进行深入分析. 1. 日期格式化 (2018 ...

  5. 在linux安装redis单机和集群后,如何在windows上使用redis客户端或者java代码访问错误的原因很简单,就是没有连接上redis服务,由于redis采用的安全策略,默认会只准许本地访问。需要通过简单配置,完成允许外网访问。

    这几天在学习在linux上搭建服务器的工作,可谓历经艰辛.可喜最后收获也不少. 这次是在linux上搭建redis服务器后从windows上缺无法访问,连接不上. 仔细回忆以前搭建nginx和ftp的 ...

  6. 洛谷【P4551】最长异或路径

    浅谈\(Trie\):https://www.cnblogs.com/AKMer/p/10444829.html 题目传送门:https://www.luogu.org/problemnew/show ...

  7. CentOS(五)--Linux系统的分区概念

    一.系统分区 首先先普及一下有关系统分区的一些知识: 硬盘分区有三种,主磁盘分区.扩展磁盘分区.逻辑分区. 一个硬盘主分区至少有1个,最多4个,扩展分区可以没有,最多1个.且主分区+扩展分区总共不能超 ...

  8. Micro-PaaS(Docker+K8S)

    1.概述 Docker是一种Linux容器工具集,它是为构建(Build).交付(Ship)和运行(Run)分布式应用而设计的. Kubernates:是开源的容器集群管理系统.它构建在Docker技 ...

  9. erlang的调试配置

    distel可以断点调试erlang,但是步骤非常繁琐 以下面的测试脚本为例说明 geometry.erl -module(geometry). -export([area/1]). area({re ...

  10. Go的List操作上的一个小“坑”

    转自http://sharecore.net/blog/2014/01/09/the-trap-in-golang-list/ 一直想不清楚一个问题,简单设计的东西到底是“坑多”还是“坑少”呢? 复杂 ...