Question

我正在创建一个Web应用程序，在该应用程序中我需要对地图的特定区域进行模糊处理。为了更容易，我们可以说我需要在左上角模糊100x100 PX。即使我导航到地图上的新地方，也必须在模糊区域中。

并且仅在该框上具有模糊效果。我正在使用SCSS，Javascript和Openlayer作为地图提供程序。

我可以使用以下Css代码来模糊整个地图，但不仅限于特定区域：

this._map = new Map({
      target: "theMap"
    //openlayers code..



<div className="mapStyling" id="theMap">
<div classname="blurredBox"/>
</div>

.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'
}
}

这里的问题是，如果我将“ bss css code”（Blur CSS代码）移到blurdBox，我不会得到模糊效果。

非常感谢您的帮助。

Answer 1

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

您通过class='xxx'用HTML声明了一个类
您正在.blurredBox内嵌套.mapStyling，这是不应该的。
您对.blurredBox height的css语法错误并且错过了:。您的with的词汇也是错误的。

解决所有问题后，您应该可以拥有类似codepen

的内容

我建议您在使用任何编码的浏览器上打开开发人员工具，然后检查CSS样式。您的想法很好，而且要点，只需多进行一些调试即可。您可以检查如何使用CSS开发者工具here

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

1 个答案: