2020/09/10(Thu) 14:37

Name: 清水31

・画像url(xxxx)にグラデーションをつけるには
　background-image: linear-graient(rgba(255,255,255,.3), rgba(255,255,255,0)),
　　　　　　　　　　url(xxxx);
とする。上記の例は上から下へ明(30%)から暗(0%)へのグラデーションとなる。

・ボタン画像では上記のurl(xxxx)の部分は以下のようなbase64コーディングの埋め込みデータとなっている。
　url(data:image/png;base64,iVBORw0KG…SuQmCC);
この画像は透明度がバラバラな縞模様となっている。

・透明度のある背景画像(background-image)と背景色(background-color)の両方が指定されると透明な部分は背景色が表示される。

・ボタン画像では透明度がバラバラな縞模様＋背景色が指定されている。背景色だけを緑や赤に変えるだけで緑のグラデーションや赤のグラデーションが実現できる。

===> こんな技があったとは驚きであった！