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%; }

浙公網安備 33010602011771號