質問編集履歴

3 変更

kfsa

kfsa score 1

2020/07/15 11:51  投稿

background-imageとbackground-colorを合わせたアニメーション
### 前提・実現したいこと
background-imageとbackground-colorの合わせたアニメーションを実現したいのですが、
background-imageをかけるとbackground-colorが無効となってしまいます
どうしたらbackground-imageがかかったdivをhoverで色の変更をさせることができますでしょうか?
### 該当のソースコード
```HTML+CSS
<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>
```
  • CSS

    13626 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2 変更

kfsa

kfsa score 1

2020/07/15 11:43  投稿

background-imageとbackground-colorを合わせたアニメーション
### 前提・実現したいこと
background-imageとbackground-colorの合わせたアニメーションを実現したいのですが、
background-imageをかけるとbackground-colorが無効となってしまいます
どうしたらbackground-imageがかかったdivをhoverで色の変更をさせることができますでしょうか?
### 該当のソースコード
```HTML+CSS
<style>
 body,html{
   height:100%;
 }
 .bcolor {
   background-color: #151515;
   background-color: red;
   transition: all 0.3s ease;
 }
 .bcolor:hover {
   background-color: #53a7ea;
   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>
```
  • CSS

    13626 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 変更

kfsa

kfsa score 1

2020/07/15 11:38  投稿

CSSに詳しい方お願いします
background-imageとbackground-colorを合わせたアニメーション
### 前提・実現したいこと
background-imageとbackground-colorの合わせたアニメーションを実現したいのですが、
background-imageをかけるとbackground-colorが無効となってしまいます
どうしたらbackground-imageがかかったdivをhoverで色の変更をさせることができますでしょうか?
### 該当のソースコード
```HTML+CSS
<style>
body,html{
height:100%;
}
.bcolor {
background-color: #151515;
transition: all 0.3s ease;
}
.bcolor:hover {
background-color: #53a7ea;
}
</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>
```
  • CSS

    13626 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る