这是在谷歌浏览器上的效果
而filter:blur(12px)却可以生效,但我不想内容模糊掉,
有什么办法吗?大佬们求解求解,万分着急
把前缀webkit去掉试试再不行就提高优先级试试加上!important
哦我试了一下似乎必须加上postion:fixed属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<style>
#dialog {
background-color: rgba(0, 0, 0, .45);
bottom: 0;
height: 100%;
width: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
-moz-backdrop-filter: blur(2px);
-ms-backdrop-filter: blur(2px);
}
.box {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="./1618572093(1).png" alt="">
<div id="dialog"></div>
</div>
</body>
<script>
</script>
</html>
好奇怪我怎么写都不生效但是,我在antd model组件里 写上这个可以生效真奇葩