background-imageとbackground-colorを合わせたアニメーション

Question

前提・実現したいこと

background-imageとbackground-colorの合わせたアニメーションを実現したいのですが、
background-imageをかけるとbackground-colorが無効となってしまいます
どうしたらbackground-imageがかかったdivをhoverで色の変更をさせることができますでしょうか？

該当のソースコード

<style>
  body,html{
    height:100%;
  }
  .bcolor {
    background-color: red;
    transition: all 0.3s ease;

  }

  .bcolor:hover {
    background-color: blue;
  }
</style>

<div style="width:50%;height:20%;float:left;display: flex;justify-content: center;align-items: center">
<div style="display: flex;justify-content: center;align-items: center;;background:transparent url('https://pcwindows.jp.net/wp-content/uploads/2019/05/PC-Settings-App.png') no-repeat left;background-size:contain;height:80%;width:80%" class="bcolor">menu1</div></div>

<div style="width:50%;height:20%;float:left;display: flex;justify-content: center;align-items: center">
<div style="display: flex;justify-content: center;align-items: center;;background:transparent url('https://pcwindows.jp.net/wp-content/uploads/2019/05/PC-Settings-App.png') no-repeat left;background-size:contain;height:80%;width:80%" class="bcolor">menu2</div></div>

Comments

[kei344]

（質問文は編集できます）質問タイトルは質問内容が具体的にわかるものに変えてください。

[kfsa]

変更させていただきました

Answer 1

background-imageをかけるとbackground-colorが無効となってしまいます

なりません。画像より奥にbackground-colorが描画されます（MDN）。透明な画像を使えば、背景色の変化を確認することが可能です。

Comments

[kfsa]

同じdivで同時には無理という事でしょうか？

[maisumakun]

透過される画像を使えば可能です。

[kfsa]

下記で動きました

<style>
body,html{
height:100%;
}
.bcolor {
background-color: red;
transition: all 0.3s ease;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.bcolor:hover {
background-color: blue;
}
</style>

<div style="width:50%;height:20%;float:left;display: flex;justify-content: center;align-items: center">
<div style="display: flex;justify-content: center;align-items: center;background-image:url('https://pcwindows.jp.net/wp-content/uploads/2019/05/PC-Settings-App.png');height:80%;width:80%" class="bcolor">menu1</div></div>

<div style="width:50%;height:20%;float:left;display: flex;justify-content: center;align-items: center">
<div style="display: flex;justify-content: center;align-items: center;background-image:url('https://pcwindows.jp.net/wp-content/uploads/2019/05/PC-Settings-App.png');height:80%;width:80%" class="bcolor">menu2</div></div>