前端实现一个自适应的正方形(前端实现背景虚化但内容清晰且自适应 的实例代码)
类别:Web前端 浏览量:2482
时间:2021-10-02 01:36:03 前端实现一个自适应的正方形
前端实现背景虚化但内容清晰且自适应 的实例代码讲干货,不啰嗦,有时候前端会遇到背景虚化但要求内容清晰的需求,先看效果:
以下为具体实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景虚化</title> </head> <body> <li class="main"> <!-- 以下为背景虚化,其他内容清晰--> <!-- 内容层--> <li class="banner"> <li class="banner-contain"> <h1>我是内容</h1> </li> <!-- 背景层--> <li class="banner-bg"></li> </li> </li> <style> .main{ width: 100%; } .banner{ width: 100%; position: relative; } .banner-bg{ width: 100%;/*宽度铺满屏幕*/ padding-top: 52.734%;/*图片高度除以宽度,得到此值*/ background: url("test.jpg" alt="前端实现一个自适应的正方形(前端实现背景虚化但内容清晰且自适应 的实例代码)" border="0" />
1.自适应的实现:
设置li标签padding-top为百分比,padding和margin百分比值是依据宽度计算的而非屏幕高度,所以可以依此设置一个自适应的区域,比如图片信息如下
那么高宽比例为:540/1024 大概为52.734%,也就是高度为宽度的52.734%,这里宽度设置为100%,那么宽度的padding-top
即为52.734%*100%
2.背景虚化内容清晰的实现:
设置两个层,一个是背景虚化层,自适应撑起整个外层li容器,通过filter:blur()
属性设置虚化值,另一个为内容层,绝对定位,设置z-index提高内容层层次防止被遮挡,这样内容层不受虚化影响
总结
以上所述是小编给大家介绍的前端实现背景虚化但内容清晰且自适应 的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- css中background image重复平铺(解决CSS 中box-sizing与background-clip解决背景显示范围的问题)
- css渐变色动画(详解CSS背景渐变图片transtion过渡效果技巧)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- css边框属性一览(css背景和边框标签实例详解)
- laravel6后台管理系统(基于laravel-admin 后台 列表标签背景的使用方法)
- python飞机大战游戏背景(python实现飞机大战游戏)
- css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- css3支持多重背景吗(真正了解CSS3背景下的@font face规则)
- 前端实现一个自适应的正方形(前端实现背景虚化但内容清晰且自适应 的实例代码)
- css边框设置颜色(CSS 制作带边框背景色透明的消息框)
- css特效边框流线动画(CSS 动画实现动态气泡背景的方法)
- html5添加背景(Html5实现首页动态视频背景的示例代码)
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- 微商在朋友圈热卖的 DL减肥咖啡 含违禁药物,你还敢买吗(微商在朋友圈热卖的)
- 八一节,说说中国女兵(八一节说说中国女兵)
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
热门推荐
- cuda安装包下载慢(Manjaro安装CUDA实现教程解析)
- docker启动命令大全(Docker常用命令Study03详解)
- MySQL定时任务(EVENT事件)如何配置详解(MySQL定时任务EVENT事件如何配置详解)
- 在python中如何删除指定的行(Python删除n行后的其他行方法)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
- windows10怎么设置iis框架(Windows10系统如何安装IIS服务器)
- mysql 分库分表步骤(MySQL读多写少设计方案 - 分库分表还能这么做?)
- laravel5.5以下自定义日志(Laravel timestamps 设置为unix时间戳的方法)
- python 百度搜索结果(Python模拟百度自动输入搜索功能的实例)
- python opencv替换背景教程(基于OpenCV python3实现证件照换背景的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9