css实现图片等比例完全展示,背景加图片 200%放大虚化
html
<div class="img-box">
<div class="img"></div>
<div class="img-bg"></div>
</div>
css
.img-box { width: 100%; height: 212px; position: relative; .img { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url('test.png'); position: relative; z-index: 100; } .img-bg { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-image: url('test.png'); background-size: 200%; /* 放大两倍 */ background-position: center; background-repeat: no-repeat; overflow: hidden; } .img-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */ z-index: 1; /* 确保蒙层在背景之上 */ backdrop-filter: blur(20px); /* 添加20模糊效果 */ }
以上代码因为 img-box 带圆角,在高版本 iOS 系统下,由于 img-bg 的绝对定位会导致 .img继承的圆角会失效。
修改后如下:将 img-bg的决定定位改为相对定位,并放在和 img 同样的位置上。
.img-bg { position: relative; top: -100%; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2018-07-31 react-router 4.3 js实现跳转
2018-07-31 react中实现搜索结果中关键词高亮显示