css背景图等比例缩放，盒子随背景图等比例缩放
很多时候我们给网站了一个大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背景图等比例缩放，盒子随背景图等比例缩放的更多相关文章
- php缩放gif和png图透明背景变成黑色的解决方法_php技巧
工作中需要缩放一些gif图然后在去Imagecopymerge,可是发现使用了imagecreatetruecolor和imagecopyresampled后发现背景图不对,本来透明的背景图变成了黑色 ...
- 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- 9.求背景图片左边到#box盒子左边外框侧的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 尺寸、边框、内边距、背景以及css Sprite
上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...
- 【WEB基础】HTML & CSS 基础入门（5）边框与背景
前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...
- 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明
第4章 背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...
- 更新到PS CC 2019 缩放的时候 按住shift变成不规则缩放了 反而不按住shift是等比例缩放
更新到PS CC 2019 缩放的时候 按住shift变成不规则缩放了 反而不按住shift是等比例缩放 更新到PS CC 2019 缩放的时候 按住shift变成不规则缩放了 反而不按住shift是 ...
- CSS中的间距设置与盒子模型
CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...
随机推荐
- Spring Cloud Config 服务端与 客户端之间的关系
1.服务端有两个可配置项 # 是否在服务器端进行解密操作,默认开启. # 如果改为不在服务器端开启(false) # 那么一定要将encrypt.key 删除. # 否则会出现客户端无法解密. # 为 ...
- CentOS的Gearman安装
背景:用PHP做一些简单的上传是没有任何的问题,但是要做断点上传好像也是没有大问题,但要是并发的切片加断点上传可能就会有问题了哟.第一个问题是合并问题:如果一上传就合并,PHP老半天不返回是一个方面( ...
- 在android程序中打开另一个应用程序
Android 开发有时需要在一个应用中启动另一个应用,比如Launcher加载所有的已安装的程序的列表,当点击图标时可以启动另一个应用. 一般我们知道了另一个应用的包名和MainActivity的名 ...
- Java设计模式（11）外观模式（Facade模式）
外观模式(Facade)的定义:为子系统中的一组接口提供一个一致的界面. Facade一个典型应用就是数据库JDBC的应用,如下例对数据库的操作: public class DBCompare { C ...
- apk签名打包时报master password is required to unlock the password database.错误，或者signtrue versions无法勾选，以及Error:Execution failed for task ':app:lintVitalRelease'.
1.如果在签名时android studio报"Master password is required to unlock the password database.The passwor ...
- ImageMagick安装
图片处理是大多数电子商务系统必须用到的组件,下面介绍ImageMagick的安装! 一.软件列表ImageMagick-6.7.1-0.tar.gzJMagick-6.4.0-0.tar.gzjpeg ...
- mxnet卷积计算
#coding:utf-8 ''' 卷积计算 ''' import mxnet as mx from mxnet.gluon import nn from mxnet import ndarray a ...
- Axiom3D:手动创建ManualObject与Mesh,以及如何使用Cg着色器语言
在开始正文前,先说下Axiom3D里遇到的二个BUG. 1.在启动axiom生成的程序中,我发现输出里总是有一些如"billboard_type","billboard_ ...
- DataFrame重命名单个column
由于当时的需求我的a表和b表的公共键名称不一样 例如这个 那么我就可以进行重命名: df1 = DataFrame(np.arange().reshape((, )), columns=['a', ' ...
- 深入理解Java对象序列化
关于Java序列化的文章早已是汗牛充栋了,本文是对我个人过往学习,理解及应用Java序列化的一个总结.此文内容涉及Java序列化的基本原理,以及多种方法对序列化形式进行定制.在撰写本文时,既参考了Th ...