参考を見ながら適用しようとしたら詰まったのでメモ
概要
参考を見て試すも
background-clip: text;が適用されず文字抜きが上手く表示されなかった
原因・結果
backgroundセレクターでは反映されず、background-image又はbackground-textでは反映されるみたい
style.css
/*-- NG --*/
.textGr{
color: #ae9b7a;
background: linear-gradient(90deg, rgba(174,155,122,1) 0%, rgba(255,241,215,1) 50%, rgba(174,155,122,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: inline-block;
}
/*-- OK --*/
.textGr{
color: #ae9b7a;
background-image: linear-gradient(90deg, rgba(174,155,122,1) 0%, rgba(255,241,215,1) 50%, rgba(174,155,122,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: inline-block;
}
参考先
↧