Question

背景过滤器会向元素添加模糊边缘，如果模糊量太大，则模糊效果实际上就消失了。

我希望您使用背景滤镜5px和55px的值，并告诉我是否可以注意到差异。

我知道您可能会说，Firefox等浏览器中没有这个实验性功能。在Chromium上运行的Electron中却存在。

我真的需要这种效果来在我的代码编辑器应用程序中构建一个漂亮的菜单项，以使其看起来像Mac OS菜单的

是否有一种方法可以解决此问题，而无需使用JQuery，并且实际上也不需要任何JavaScript。

请也不要使用SVG解决方法。

这是我在Electron中构建的代码编辑器应用程序

* {
  outline:0
}

html, body {
  margin:0;
  padding:0
}

div#vm {
  background-image:url('https://i.imgur.com/jLihMx1.png');
  background-size:contain;
  background-repeat:no-repeat;
  width:640px;
  height:480px;
  margin:-55px;
  border:1px solid #000;
  box-sizing:border-box;
  transform:scale(0.7)
}

div#vm div#taskbar {
  background-color:rgb(50, 50, 50, 0.0);
  backdrop-filter:blur(5px);
  width:100%;
  height:40px;
  margin-top:440px;
  bottom:0
}

<!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Windows 10 Example</title>
  </head>
<body>
  <div id="vm">
<div id="taskbar">
  <!-- Taskbar Content -->
</div>
  </div>
</body>
</html>

如何停止将背景模糊应用于元素边缘的背景滤镜

0 个答案: