CSSにbackgroundの指定をかけたら子要素の画像の色が反転してしまう

子要素に画像を含んでいる親要素にbackground:whiteを指定したところ、filter:invert()をかけているわけでもないのに、なぜか画像の色が反転してしまい困っております。

該当のソースコード

HTML

1<div class="header__logoarea"> 2　<a href="<?php echo home_url() ?>" class="header__logo js-header__logo"> 3 　<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt=""> 4 </a> 5</div>

SCSS

1&__logoarea {2 position: absolute;3 top: 0;4 left: 50%;5 transform: translateX(-50%);6 @include w_vw(220);7 @include h_vw(220);8 border-radius: 50%;9 background:white;10}11 12&__logo {13 display: flex;14 align-items: center;15 @include w_vw(170);16 @include mt_vw(10);17 border-radius: 50%;18 19 img {20 width: 100%;21 }22}