很多时候我们给网站了一个大banner,但是随着屏幕的变化，背景会变形，我们知道background-size可以实现背景图等比例缩放，但是，我们想让下面的盒子根据缩放后背景图的高度，也能自动向上挤。这用css竟然也是可以实现的，瞬间感觉自己的css弱爆了，下面是我写的小demo,我想在响应式的网站上，这个用途还是很广的

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    .wrap {

      position: relative;

    }

    .banner {

      width:100%;

      height:auto;

      background-image: url(banner.jpg);

      background-size: 100% auto;

      background-repeat: no-repeat;

      position: relative;

    }

    .banner::after {

      content: "";

      display: block;

      /*图片的宽高比计算得出*/

      padding-top: 45%;

    }

     .box {

      background-color: green;

      /*居中盒子*/

      position: absolute;

      top:100px;

      left:0;

      right: 0;

      margin:0 auto;

      width:50%;

      height:100px;

    }

     .main {

      width:100%;

      height:100px;

      background-color: yellow;

    }

  </style>

</head>

<body>

<div class="wrap">

  <div class="banner">

    <div class="box"></div>

  </div>

  <div class="main"></div>

</div>

</body>

</html>

效果图：

绿色盒子始终占据整个背景图的50%，且居中，下面的盒子始终紧跟着背景图高度变化。无论屏幕如何缩放，都能保证全体等比缩放

css背景图等比例缩放，盒子随背景图等比例缩放的更多相关文章

  1. php缩放gif和png图透明背景变成黑色的解决方法_php技巧

    工作中需要缩放一些gif图然后在去Imagecopymerge,可是发现使用了imagecreatetruecolor和imagecopyresampled后发现背景图不对,本来透明的背景图变成了黑色 ...

  2. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  4. 9.求背景图片左边到#box盒子左边外框侧的距离

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css 尺寸、边框、内边距、背景以及css Sprite

    上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...

  6. 【WEB基础】HTML & CSS 基础入门（5）边框与背景

    前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...

  7. 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明

    第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...

  8. 更新到PS CC 2019 缩放的时候 按住shift变成不规则缩放了 反而不按住shift是等比例缩放

    更新到PS CC 2019 缩放的时候 按住shift变成不规则缩放了 反而不按住shift是等比例缩放 更新到PS CC 2019 缩放的时候 按住shift变成不规则缩放了 反而不按住shift是 ...

  9. CSS中的间距设置与盒子模型

    CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...

  10. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

随机推荐

  1. 服务器cpu过高修复：操作系统内核bug导致

    服务器cpu过高修复:操作系统内核bug导致修改系统内核参数/etc/sysctl.conf添加下面2条参数:vm.dirty_background_ratio=5vm.dirty_ratio=10

  2. 为HTML5开发人员量身打造的7个Web框架

    HTML5规范开发完成时,将成为主流.据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万.毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的 ...

  3. loadrunner 性能测试报error-27796的解决

    网上观点: 在注册表HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Services/Tcpip/Parameters里,有如下两个键值:TcpTimedWai ...

  4. 电源PI相关知识讲解

    电源层与地线层的谐振控制 一旦PCB的电源与地层的形状.距离以及中间介质定下来以后,发生谐振的频率也就定下来了. 采用LC等效电路,不考虑PCB上的损耗,而这些损耗往往在高频影响尤为明显,例如趋肤效应 ...

  5. FPGA中的时序分析（五）

    时序约束实例详解 本篇博客结合之前的内容,然后实打实的做一个约束实例,通过本实例读者应该会实用timequest去分析相关的实例.本实例以VGA实验为基础,介绍如何去做时序约束. 首先VGA这种情况属 ...

  6. 百度echarts极速入门

    1.http://echarts.baidu.com/ 进入官网 2.打开官方示例 3.随便打开一个列子并打开f12浏览器调试模式,找到例子的iframe地址 4.打开地址 5.下载例子,so eas ...

  7. Axiom3D:Ogre地形组件代码解析

    大致流程. 这里简单介绍下,Axiom中采用的Ogre的地形组件的一些概念与如何生成地形. 先说下大致流程,然后大家再往下看.(只说如何生成地形与LOD,除高度纹理图外别的纹理暂时不管.) 1.生成T ...

  8. Oracle 数据泵使用详解

    数据泵使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORACLE服务端 ...

  9. 7款开源ERP系统比较

    [网络转载] 现在有许多企业将ERP项目,在企 业中没有实施好,都归咎于软件产品不好.其实,这只是你们的借口.若想要将ERP软件真正与企业融合一体,首先得考虑企业的自身情况,再去选择适合的 ERP软件 ...

  10. 【转】【Android】Android Studio打包全攻略

    项目写完了,现在需要把应用上传到市场,问题出现—怎么把代码变成.apk(Android的可安装文件).1. 创建签名文件2. 填写好签名参数3. 生成APK注意:签名的密码和密匙的密码注意保管,不要忘 ...