很多时候我们给网站了一个大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. 百度地图Api进阶教程-弹出信息窗口5.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  2. IOC容器：Unity

    一.什么是IOC 学习IOC之前先来了解一个依赖导致原则(DIP),依赖导致原则是IOC的核心原理. 依赖导致:即上层模块不应该依赖于低层模块,二者应该通过抽象来依赖.依赖于抽象,而不是依赖于细节. ...

  3. redis连接超时问题排查

    连接池无法获取到连接或获取连接超时redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource f ...

  4. PHP zhuaq

    change_html_img_src.php <?php $url=$_GET['url']; $id=$_GET['id']; $type=$_GET['type']; $redis_key ...

  5. Linux中通过/proc/stat等文件计算Cpu使用率

    Linux平台Cpu使用率的计算 proc文件系统 /proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为内核与进程提供通信的接口.用户和应用程序可以通过/pro ...

  6. 关于Unity中如何判断一个动画播放结束

    方法一(强力推荐): 在动画结束帧或其他帧处加个动画事件,在播放到这一帧的时候会自动调用这个动画函数 如图,找到对应动画的inspector面板,在里面有个Events下拉条,下拉后在想要的帧的位置添 ...

  7. ubuntu 安装bazel

    https://docs.bazel.build/versions/master/install-ubuntu.html#install-with-installer-ubuntu

  8. php -- 取整数

    PHP取整数函数常用的四种方法,下面收集了四个函数: 经常用到取整的函数,今天小小的总结一下!其实很简单,就是几个函数而已--主要是:ceil,floor,round,intval ceil — 进一 ...

  9. [原创]RX801SJ 实时时钟RTC调试纪要 : 时钟输出设置

    利用USB转I2C/SPI/UART板进行通信测试 1.RX8010SJ的I2C通信地址定义如下: 设备读取地址:0X65 设备写入地址:0X64   2.USB2ish0转接板操作界面如下: 3.参 ...

  10. systemd的运行级别与服务管理命令简介

    从很久很久以前我们就在使用静态运行级别.而systemd提供了更为动态灵活的机制,来管控你的系统. 在开始介绍systemd命令前,让我们先简单的回顾一下历史.在Linux世界里,有一个很奇怪的现象, ...