很多时候我们给网站了一个大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. RGB转灰度图的几种算法

    https://blog.csdn.net/cool1949/article/details/6649429 方法一:    对于彩色转灰度,有一个很著名的心理学公式: Gray = R*0.299 ...

  2. FileZilla等软件搭建ftp服务器

    一.常用的几款ftp服务器软件介绍 1.1 Server-U Serv-U是一种被广泛运用的FTP服务器端软件,支持3x/9x/ME/NT/2K/2000/xp等全Windows系列.可以设定多个FT ...

  3. 动态规划--最长上升子序列(Longest increasing subsequence)

    前面写了最长公共子序列的问题.然后再加上自身对动态规划的理解,真到简单的DP问题很快就解决了.其实只要理解了动态规划的本质,那么再有针对性的去做这方的题目,思路很快就会有了.不错不错~加油 题目描述: ...

  4. idea+maven无法自动加载jar包

    没有配置maven的环境变量所致 执行mvn -version进行检测

  5. JDBC异常

    异常处理允许我们以受控的方式处理异常情况,而不是直接退出程序,例如程序定义的错误. 发生异常时可以抛出异常.术语“异常”表示当前的程序执行停止,并且被重定向到最近的适用的catch子句.如果没有适用的 ...

  6. Python——os（一）进程参数

    python的os模块提供了一种使用操作系统相关函数的通用手段,如果只是想读或写文件请移步 open(),向操作路径请查阅 os.path 模块,如果想要读取命令行中所有文件里的所有行请查阅 file ...

  7. ASM实例原始磁盘搜索路径

    discovery diskstring==>ASM实例原始磁盘搜索路径,一般搜索/dev/raw/  /dev/oracleasm/ 初始化参数文件中为:asm_diskstring asmc ...

  8. js 正则去重

    split():字符串中的方法,把字符串转成数组. sort():数组中的排序方法,按照ACALL码进行排序. join():数组中的方法,把数组转换为字符串 var demo="ababb ...

  9. java String.intern();

    0.引言 什么都先不说,先看下面这个引入的例子: String str1 = new String("SEU")+ new String("Calvin"); ...

  10. 【CTR】各公司方法

    LR + 海量高纬离散特征 GBDT + 少量低纬连续特征 (Yahoo & Bing) GBDT + LR (FaceBook) FM + DNN (百度凤巢) MLR (阿里妈妈) FTR ...