前提・実現したいこと
画像2のようなもの、実現したいのですが、z-indexは正しく実装されいるのに画像1のようにlightblueのカラーが上になってしまいます。
発生している問題・エラーメッセージ
なぜかは分かりませんが、-webkit-text-fill-colorを消すとz-indexが効くことができます。
ですが、-webkit-text-fill-colorも適応したいので、両方適応させつつ実現する方法をご教示お願いたします。
該当のソースコード
.text { position: relative; z-index: 3; display: inline-block; font-size: 40px; /* グラデーションcolor */ background-image: linear-gradient(to top, #1d2088, #337cc7); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text::after { content: ""; position: absolute; bottom: 12px; left: 0; width: 100%; height: 8px; background-color: #d3edfb; z-index: -1; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/25 06:49