[HTML/CSS]画像の色が背景色で上書きされてしまう

背景色が変わるCSSアニメーションをあてると、もともとあった画像の色が変わってしまいます。
z-indexをいじってみたり、画像をdivで囲ってみたり、#topではなく#top:afterにアニメーションを当ててみたりしてもやっぱり色が上書きされてしまうので質問した次第です。

アニメーションの範囲及び画像の位置は変えずに、画像の色だけオリジナルのもので固定するにはどうすればよいでしょうか？

html
1<section id="top">
2  <div class="textBx">
3    <h2>Suenaga Katsuyuki.</h2>
4    <p>learning man</p>
5    <a href="#about" class="btn">About Me</a>
6  </div>
7  <div class="imgBx">
8    <img src="sue.jpg">
9  </div>
10</section>

CSS
1* {
2  padding: 0;
3  margin: 0;
4  font-family: 'M PLUS Rounded 1c', 'Ubuntu Mono', sans-serif;
5  box-sizing: border-box;
6}
7
8section {
9  padding: 100px;
10  background: #252627;
11}
12
13#top {
14  min-height: 100vh;
15  display: flex;
16  justify-content: center;
17  align-items: center;
18  background: linear-gradient(-30deg, #f2823c 0%, #d65c15 50%, #252627 50%, #252627 100%);
19  filter: hue-rotate(120deg);
20  animation: animate 10s linear infinite;
21}
22
23@keyframes animate {
24  0% {
25    filter: hue-rotate(0deg);
26  }
27  100% {
28    filter: hue-rotate(360deg);
29  }
30}
31
32#top img {
33  width: 400px;
34  height: 400px;
35  object-fit: cover;
36  border-radius: 50%;
37}
38
39#top .imgBx {
40  margin-left: 50px;
41  border-radius: 50%;
42  background: #252627;
43  box-shadow:  7px 7px 17px #171819, 
44             -7px -7px 17px #333435;
45  background: #252627;
46  z-index: 10;
47}

記載すべきコード等が抜けていたら申し訳ありません。追記させていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

filter は内包する要素すべてに効果があたりますので、疑似要素に背景グラデーションとアニメーションを設定すればいいと思います。

CSS
1section {
2  padding: 100px;
3/* background: #252627; */
4}
5
6#top {
7  min-height: 100vh;
8  display: flex;
9  justify-content: center;
10  align-items: center;
11}
12
13#top::before {
14  content: "";
15  display: block;
16  position: absolute;
17  top: 0;
18  bottom: 0;
19  left: 0;
20  right: 0;
21  background: linear-gradient(-30deg, #f2823c 0%, #d65c15 50%, #252627 50%, #252627 100%);
22  filter: hue-rotate(120deg);
23  animation: animate 10s linear infinite;
24  z-index: -1;
25}
26
27@keyframes animate {
28  0% {
29    filter: hue-rotate(0deg);
30  }
31  100% {
32    filter: hue-rotate(360deg);
33  }
34}