如何调整背景图像的亮度without it affecting the foreground items? [duplicate]

Question

这个问题在这里已有答案：

How to apply a CSS 3 blur filter to a background image 15个答案
Apply a CSS filter only on background 2回答

让我先言一下，我是html和CSS的老手。话虽这么说，我有一个JS小提琴我的网站的一部分：https://jsfiddle.net/rharrison2641/sb3rzm9t/2/

码。）

HTML：

<section class="FutureGoals">

  <div class="BlizzBox">

    <div class="Blizzard1">

      <img alt="BlizzPop" src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">

    </div>

  </div>

</section>

CSS：

.FutureGoals {
  height: 100vh;
  overflow: hidden;
}

.BlizzBox {
  height: 100vh;
  overflow: hidden;
}

.Blizzard1 {
  background: url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
  background-repeat: no-repeat;
  background-position: 75%;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.Blizzard1:hover {
  -webkit-filter: brightness(50%);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}

.BlizzPop {
  position: relative;
  height: auto;
  width: 30%;
  left: 25%;
  top: 9%;
  z-index: 1;
  transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -webkit-transition: all .7s ease;
  -o-transition: all .7s ease;
}

.Blizzard1:hover .BlizzPop {
  z-index: 1;
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}

基本上我正在尝试做的是调暗背景图像，Blizzard.jpg，但是使Blizzard.png徽标不会变暗并保持其白色。现在看来，一切都很完美，但徽标变成了浅灰色。我已经尝试将图像放在div之外的背景图像，但它只会导致窗口调整大小搞砸了。有人可以为此提出解决方案吗？我已经尝试了几天，所以任何解决方案或帮助将不胜感激。