Html 如何调整a<；中背景图像的亮度；部门>；不影响前台项目？

让我先说明一下，我是HTML和CSS的高手。话虽如此，我的网站的一个部分有一个JS提琴：

代码。）

HTML:

基本上，我想做的是使背景图像Blizzard.jpg变暗，但使Blizzard.png徽标不变暗并保留其白色。就目前而言，一切都很完美，但徽标的颜色变暗为轻微的灰色。我曾尝试将图像与背景图像一起放置在div之外，但这只会导致窗口的大小调整变得非常糟糕。有人能提出一个解决办法吗？我已经尝试了好几天了，所以任何解决方案或帮助都将不胜感激。

您可以在

背景图像上放置一个
rgba（）
渐变，使其变暗

background: 
     linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),/* the gradient on top, adjust color and opacity to your taste */
      url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);

下面是演示


。未来目标{
高度：100vh；
溢出：隐藏；
}
.BlizzBox{
高度：100vh；
溢出：隐藏；
}
.暴雪1{
背景：url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
背景重复：无重复；
背景位置：75%；
背景附件：固定；
身高：100%；
宽度：100%；
过渡：所有。5s轻松；
-moz过渡：全部5秒轻松；
-ms过渡：全部5秒轻松；
-webkit过渡：全部。5s轻松；
-o型过渡：全部。5秒轻松；
webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.暴雪1：悬停{
背景：线性梯度（0度，rgba（0，0，0，0.5），rgba（0，0，0，0.5）），url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
背景重复：无重复；
背景位置：75%；
背景附件：固定；
webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
-o变换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）”；
过滤器：progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）；
}
.BlizzPop{
位置：相对位置；
高度：自动；
宽度：30%；
左：25%；
最高：9%；
z指数：1；
过渡：全部。7秒轻松；
-moz过渡：所有.7秒轻松；
-ms过渡：所有.7秒轻松；
-webkit过渡：全部.7秒轻松；
-o型过渡：所有。7秒缓解；
}
.暴雪1:悬停，暴雪流行{
z指数：1；
-moz变换：比例（1.5）；
-webkit转换：比例（1.5）；
-o变换：比例（1.5）；
-ms变换：比例（1.5）；
转换：比例（1.5）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）”；
过滤器：progid:DXImageTransform.Microsoft.Matrix（M11=1.5，M12=0，M21=0，M22=1.5，SizingMethod='auto expand'）；
}


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

background: 
     linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),/* the gradient on top, adjust color and opacity to your taste */
      url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);