前端实现一个自适应的正方形(前端实现背景虚化但内容清晰且自适应 的实例代码)
类别: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提高内容层层次防止被遮挡,这样内容层不受虚化影响
总结
以上所述是小编给大家介绍的前端实现背景虚化但内容清晰且自适应 的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- html5背景怎么变色(HTML5 背景的显示区域实现)
- css边框设置颜色(CSS 制作带边框背景色透明的消息框)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- python批量图像换背景(详解Python给照片换底色蓝底换红底)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- css中background image重复平铺(解决CSS 中box-sizing与background-clip解决背景显示范围的问题)
- laravel6后台管理系统(基于laravel-admin 后台 列表标签背景的使用方法)
- css渐变色动画(详解CSS背景渐变图片transtion过渡效果技巧)
- 前端实现一个自适应的正方形(前端实现背景虚化但内容清晰且自适应 的实例代码)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- css3渐变色动画代码(CSS3 实现的动态星空背景)
- css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)
- css3背景制作(纯CSS3实现Material Design效果)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9