很多时候我们给网站了一个大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. freemarker XMLGregorianCalendar 转日期

    ${m.createdate.toGregorianCalendar().getTime()?string("yyyy-MM-dd")} createdate为XMLGregori ...

  2. 百度地图Api进阶教程-创建标注和自定义标注3.html

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

  3. spring boot @ConditionalOnxxx相关注解总结

    Spring boot @ConditionalOnxxx相关注解总结 下面来介绍如何使用@Condition public class TestCondition implements Condit ...

  4. linux,chmod如何更改所有子目录的权限，要包括隐藏文件

    for file in `find . -print` do chmod 777 -R $file done

  5. CATALINA_BASE与CATALINA_HOME的区别

    http://blog.csdn.net/keda8997110/article/details/21400455 —————————————————————————————————————————— ...

  6. 线段树 + 区间更新 ----- HDU 4902 : Nice boat

    Nice boat Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Tot ...

  7. JQuery操作cookies

    jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and valu ...

  8. How Vmware snapshots works

    VMware中的快照是对VMDK在某个时间点的“拷贝”,这个“拷贝”并不是对VMDK文件的复制,而是保持磁盘文件和系统内存在该时间点的状态,以便在出现故障后虚拟机能够恢复到该时间点.如果对某个虚拟机创 ...

  9. 关于Unity中的光照(二)

    光源 1: 光照的本质:就是光的颜色和物体纹理的颜色的混合;2: 光源类型: 点光源,定向光源,聚光灯, 区域光源; 区域光的范围会在场景中用黄色的光显示出来; z轴是光的方向; 光的强度会随距离衰减 ...

  10. Python中的高级turtle（海龟）作图

    在Python里,海龟不仅可以画简单的黑线,还可以用它画更复杂的几何图形,用不同的颜色,甚至还可以给形状填色. 一.从基本的正方形开始 引入turtle模块并创建Pen对象: >>> ...