.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. phpcms打印数据

    <?php echo '<pre>'; var_dump($data); echo '</pre>'; ?>

  2. CentOS 6.5 部署 Horizon

    以root用户进行部署,python源也可以使用 http://mirrors.aliyun.com/pypi/simple/ 修改系统 更改SElinux的配置文件 /etc/selinux/con ...

  3. 今天需要做手机端访问的页面,所以把meta的整理一下。

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale= ...

  4. Struts标签库详解,非常好的Struts标签详解

    Struts提供了五个标签库,即:HTML.Bean.Logic.Template和Nested. HTML 标签:         用来创建能够和Struts 框架和其他相应的HTML 标签交互的H ...

  5. Bezier曲线原理—动态解释

    公式线性公式给定点P0.P1,线性贝兹曲线只是一条两点之间的直线.且其等同于线性插值.这条线由下式给出: 一阶贝赛尔曲线上的由两个点确定 P0 和P1,当t在0--->1区间上递增时,根据此会得 ...

  6. 语义耦合(Semantic Coupling)

    跟小伙伴一起重构一段 UI,试图将用户界面和业务代码分离的时候,小伙伴试图在业务代码中直接调用 UI.我们当然都知道这会产生耦合,于是小伙伴试图定义一些属性.变量或接口来解决这个耦合.虽然在代码的静态 ...

  7. Python学习-使用Python爬取陈奕迅新歌《我们》网易云热门评论

    <后来的我们>上映也有好几天了,一直没有去看,前几天还爆出退票的事件,电影的主题曲由陈奕迅所唱,特地找了主题曲<我们>的MV看了一遍,还是那个感觉.那天偶然间看到Python中 ...

  8. vue插件vue-infinite-loading的使用

    vue-infinite-loading官网:https://peachscript.github.io/vue-infinite-loading/ 安装: npm install vue-infin ...

  9. jdk、jre、JVM的简单区别与联系

    2015-10-20 23:08:52 (1)jdk Java development toolkit(开发工具包),JDK是整个JAVA的核心,包括了Java运行环境jre(Java Runtime ...

  10. GNU Radio安装教程: Ubuntu14.04 + uhd3.10.0 + gnuradio3.7.10.1

    1. 更新和安装依赖项 在编译安装uhd和gnuradio之前,确保已安装所需依赖项.Ubuntu系统运行: sudo apt-get update 安装UHD和GNURadio所需依赖项: On U ...