css 头部banner背景图适配
来源:互联网 发布:算法和算法导论 编辑:程序博客网 时间:2024/06/06 01:25
每个网站都有banner图,基本上设计图banner图宽度都为1920px,当然,适配的方式有多种。下面简单介绍几种:
1,最愚蠢的办法就是用媒体查询(不多说);
2,用 img 标签去自适应,但是缺点也很明显,如何图片上很多字体等需要手写,当小到一定的程度位置就会不对,当很大时,图片分辨率也会有问题
3,下面介绍一种个人常用的,先贴代码
.course-class-infos {position: relative; background: #666;} .info-bg ,.cover-img-wrap{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .cover-img-wrap { z-index: 0; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat;}<div class="course-class-infos "> <div style="min-height: 830px;"> <!--此处可写自己内容--> </div> <div class="info-bg"> <div class="cover-img-wrap" style="background-image:url(https://images-web.newnewbank.com/img_banner20150810.jpg)"></div> </div></div>
代码简单,就不多说,在ie下还是有点小问题,取舍下,这个还是最好的选择,另外,写自己内容的地方要注意层级问题
完整小demo-链接:http://images-lm.oss-cn-hangzhou.aliyuncs.com/%E8%83%8C%E6%99%AF%E5%9B%BE%E9%80%82%E9%85%8D.html
阅读全文
1 0
- css 头部banner背景图适配
- Banner添加PullTorefreshListView头部
- PullToRefreshListView添加头部Banner
- ListView加头部Banner基本思路
- css背景图定位
- css实现背景图拉伸
- css背景图居中
- css body背景图全屏
- CSS背景图左右居中
- css设置背景图
- 2.CSS之背景图
- CSS背景图自适应
- css设置背景图
- CSS列表 背景图样式
- css背景图设置
- Pull分页上下拉+头部Banner
- CSS背景图拉伸自适应尺寸
- html背景图 全屏 自适应 css
- Python的with...as的用法
- Javascript异步编程
- javascript typeof instanceof
- uboot启动分析
- 常见Android模拟器连接方式
- css 头部banner背景图适配
- U盘安装CentOS7
- 递归转DP
- 极值问题(dp)
- javascript 基础知识二
- JAVA开发的23种设计模式之 --- 享元模式
- 除了深度学习,机器翻译还需要啥?
- 使用RandomAccessFile和多线程来实现开启三个线程去复制一个文件
- 算法分析学习日志(二):最大子序列和问题