如何使用Css在地图中创建“模糊区域”？

我正在创建一个web应用程序，需要对地图的某个区域进行模糊处理。 为了使它更容易，我们可以说，我需要在左上角100x100像素模糊。 即使我导航到地图中的新位置，模糊区域也必须存在

只在那个盒子上有一个模糊效果。 我正在使用SCSS、Javascript和Openlayer作为地图提供商

我可以用下面的Css代码模糊整个地图，但不仅仅是一个特定区域：

这是新地图{ 目标：主题地图 //openlayers代码。。 这里的问题是，若我将css代码模糊到blurredBox，就不会得到模糊效果

---

非常感谢您的帮助。

您的代码中有很多错误。让我列出它们：

您可以通过class='xxx'在html中声明一个类 你正在嵌套。blurredBox在里面。MapStyleing，这是不应该的。 您的.blurredBox高度的css语法错误，缺少a:。您的with在vocab中也有错误。 在解决了所有这些问题之后，您应该能够拥有这样的功能

---

我建议您在任何正在编码的浏览器上打开开发工具，并检查css样式。您的想法很好，而且切中要害，只需进行一点调试。您可以检查如何使用css开发工具。您好，谢谢您的回答！1.我正在使用react，当我使用classname=xxx 2时，我会与css取得联系。您是指css代码？我使用的是SCSS，因此可以在那里嵌套。3.发布此文章时出现拼写错误，更新了此文章。还有其他想法吗？1.你可以添加react作为标记或更新来表示你正在使用react吗？2.你能提供一些代码来显示它不工作吗？我的codepen显示它工作正常1.是的，抱歉，更新了用React而不是Javascript标记。2.我再也看不到有助于解决此问题的代码了。是的，如果我只有一个静态img或背景色，这对我来说是可行的。问题是我有一个地图而不是背景色：红色；提到你的代码笔链接，它是一个地图，而不是静态背景，这就是为什么它会变戏法恐怕是的。你想模糊整个地图，除了右上角还是其他地方？嗨，他们，我只想模糊右上角，其余的地图应该没有模糊。

.mapStyling{    
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;

//Code to create a blur
    -webkit-filter: blur(10px) saturate(10%);
    -moz-filter: blur(10px) saturate(10%);
    -o-filter: blur(10px) saturate(10%);
    -ms-filter: blur(10px) saturate(10%);
    filter: blur(10px) saturate(10%);

.blurredBox{
width: 100px;
height 100px;
margin-top:0px;
margin-left:0px;

//Here i want to 'Filter blur effect'
}
}