处理安卓机不支持backdrop-filter毛玻璃效果样式
方式一:
html:
<div>
<main>
<img class="bg" src="../../static/images/bg.png" alt="">
<blockquote> “The only way to get rid of a temptation[…]”
<footer>
— <cite> Oscar Wilde, The Picture of Dorian Gray </cite>
</footer>
</blockquote>
</main>
</div>
css:
main {
width: 100vw;
height: 100vh;
position: relative;
background: hsla(0,0%,100%,.3);
overflow: hidden;
}
main::before {
// 就是不能图片直接毛玻璃 (图片有object-fit: cover;裁剪方式)
background: url('../../static/images/bg.png') 0 / 100% 100% fixed rgba(77, 77, 77, 1);
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(30px);
margin: -30px;
}
方式二:
<div class="robotMoodDetailPage">
<img class="bg voideBgFilter" src="../../static/images/bg.png" alt="">
<div class="robotMoodDetailPageCon">
树大根深大哥
</div>
</div>
.robotMoodDetailPage{
width: 100vw;
height: 100vh;
background: rgba(77, 77, 77, 1);
.bg {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.voideBgFilter {
background: inherit;
-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-ms-filter: blur(30px);
-o-filter: blur(30px);
filter: blur(30px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); /* ie6-9*/
}
.robotMoodDetailPageCon {
position: relative;
width: 100vw;
height: 100vh;
padding-top: 2.75rem;
overflow: hidden;
position: absolute;
right: 0;
bottom: 0;
// background: inherit;
overflow: hidden;
color:#fff;
}
}