帝王谷资源网 Design By www.wdxyy.com
讲干货,不啰嗦,有时候前端会遇到背景虚化但要求内容清晰的需求,先看效果:
以下为具体实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景虚化</title> </head> <body> <div class="main"> <!-- 以下为背景虚化,其他内容清晰--> <!-- 内容层--> <div class="banner"> <div class="banner-contain"> <h1>我是内容</h1> </div> <!-- 背景层--> <div class="banner-bg"></div> </div> </div> <style> .main{ width: 100%; } .banner{ width: 100%; position: relative; } .banner-bg{ width: 100%;/*宽度铺满屏幕*/ padding-top: 52.734%;/*图片高度除以宽度,得到此值*/ background: url("test.jpg")center center no-repeat;/*两个center分别为水平和垂直方向的对齐方式*/ background-size: 100%;/*背景水平铺满*/ filter:blur(10px);/*虚化值,越大越模糊*/ } .banner-contain{ position: absolute;/*设置内容层绝对定位*/ width: 100%; text-align: center; z-index: 6;/*将内容至于上层*/ margin-top: 6%; } </style> </body> </html>
1.自适应的实现:
设置div标签padding-top为百分比,padding和margin百分比值是依据宽度计算的而非屏幕高度,所以可以依此设置一个自适应的区域,比如图片信息如下
那么高宽比例为:540/1024 大概为52.734%,也就是高度为宽度的52.734%,这里宽度设置为100%,那么宽度的padding-top
即为52.734%*100%
2.背景虚化内容清晰的实现:
设置两个层,一个是背景虚化层,自适应撑起整个外层div容器,通过filter:blur()
属性设置虚化值,另一个为内容层,绝对定位,设置z-index提高内容层层次防止被遮挡,这样内容层不受虚化影响
总结
以上所述是小编给大家介绍的前端实现背景虚化但内容清晰且自适应 的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年06月29日
2024年06月29日
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]