很多时候我们给网站了一个大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. 微信小程序——修改data里面数组某一个值

    比如我现在有个data数据如下: data: { playIndex: null, courseList: [{ videoId: '0', isPlaying: false, }, { videoI ...

  2. JS 二维数组排序

    <script> //测试方法 var a = [ {name:'hdj', age:128}, {name:'hdj1', age:28}, {name:'hdj1', age:78}, ...

  3. Java设计模式（20）观察者模式（Observer模式）

    Java深入到一定程度,就不可避免的碰到设计模式(design pattern)这一概念,了解设计模式,将使自己对java中的接口或抽象类应用有更深的理解.设计模式在java的中型系统中应用广泛,遵循 ...

  4. 自己用过的一些比较有用的css3新属性

    css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不 ...

  5. Numpy 的ndarray

    创建ndarray 使用array函数 创建一维数组 创建二维数组 并查看有几个列表,每个列表有几个值  查看类型 生成全是0的或者全是1的 具体方法作用

  6. e830. 向JTabbedPane中加入一个卡片

    This example demonstrates various ways to add a tab to a tabbed pane. // Create a tabbed pane JTabbe ...

  7. Git -- 从远程库克隆

    上次我们讲了先有本地库,后有远程库的时候,如何关联远程库. 现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫gitskill ...

  8. OpenStack Keystone架构

    一. Keystone简介 1. OpenStack Keystone简介 2. Keystone安装与部署 2.1 包安装Keystone 2.2 源码安装源码安装 3 配置运行Keystone 3 ...

  9. EF5+MVC4系列(8) ActionResult的返回值

    我们在MVC的代码中,经常会看到这样的一个 代码 可能有人会有疑问,既然我定义的是ActionResult,为什么返回值会是View方法呢? 其实这个View方法的返回值的类型是ActionResul ...

  10. ie7/8浏览器报错：对象不支持“trim”属性或方法

    解决方法: 方法1: 使用jquery里面的全局函数$.trim()代替原生js方法trim(): $.trim( 你要替换的字符 ); 方法2: Function.prototype.method ...