.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. 动态Json字符串的解析

    动态Json字符串的解析 对于传统的Json字符串,比如有规定属性的对象,通常都会采用反序列化的方式就可以了,例如下面的方式: DataContractJsonSerializer ser = new ...

  2. html(对php也有效)页面自动刷新和跳转(简单版本)

    <html>    <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...

  3. HDU2222 Keywords Search 【AC自动机】

    HDU2222 Keywords Search Problem Description In the modern time, Search engine came into the life of ...

  4. Sharepoint Web.config trust level="Full"权限说明

    在SharePoint里面,不仅有用户的权限,还有代码的权限.比如,我们在安装一个自定义的WebPart的时候,默认的情况下是不能操纵文件夹的,如果你看一些教你怎么做WebPart的文章的话,你会发现 ...

  5. WCF Restful Post调用

    一.首先建立Http的服务端,此示例的寄宿体为WindowsService,以下代码仅为WCF Restful服务代码,不包括服务启动和安装代码 1.服务契约 /// <summary> ...

  6. {Reship}{Meanshift}Mean Shift Tracking: 2000-2012回顾

    Mean Shift跟踪从 2000年被提出至今已经经历了十余个年头,从被大量灌水到如今不屑被拿来作为比较算法,经历了辉煌高潮的 Mean-Shift based Tracking正在慢慢淡出主流tr ...

  7. Altera的几个常用的Synthesis attributes(转载)

    各厂商综合工具,对HDL综合时都定义了一些综合属性这些属性可指定a declaration,a module item,a statement, or a port connection 不同的综合方 ...

  8. minio 介绍

      minio 兼容Amason的S3分布式对象存储项目,采用Golang实现,客户端支持Java,Python,Javacript, Golang语言. Minio可以做为云存储的解决方案用来保存海 ...

  9. 坚持c++,真正掌握c++(4)

    这几天复习了c++primer的第12章类的解说,尽管之前这一章也看了几遍.可是我终究认为书读百遍其义自现,如今我给出一些我学习的心得,欢迎大家一起探讨. 首先,类能够说是c++的灵魂,正由于c++中 ...

  10. vi配置

    1.配置文件的位置在目录 /etc/ 下面,有个名为vimrc的文件,这是系统中公共的vim配置文件,对所有用户都有效.而在每个用户的主目录下,都可以自己建立私有的配置文件,命名为:“.vimrc”. ...