テキスト文字にグラデーションをかけたいのですが、Safariが反映されず困ってます。
お手数ですが、解決方法が分かる方、お知らせいただけますと幸いです。
【サイト】
http://centurionlife.jp/
HTML
1<h2 class="mainT w700 sp_w100p mincho txtC font_40"><span>About Centurion Life</span></h2>
クラス「.mainT」にグラデーションの指示を書いてます。
Sass
1.mainT { 2 margin-left: auto; 3 margin-right: auto; 4 color: #F7E3A5; 5 background: -moz-linear-gradient(0deg, #AE9441, #F7E3A5, #AE9441); 6 background: -webkit-linear-gradient(0deg, #AE9441, #F7E3A5, #AE9441); 7 background: linear-gradient(0deg, #AE9441, #F7E3A5, #AE9441); 8 9 10 -moz-background-clip: text; 11 -webkit-background-clip: text; 12 background-clip: text; 13 14 15 -moz-text-fill-color: rgba(255,255,255,0); 16 -webkit-text-fill-color: rgba(255,255,255,0); 17 text-fill-color: rgba(255,255,255,0); 18 19 20 display: flex; 21 align-items: center; 22 23}
text-fill-colorの記述が問題かと思われるのですが、以下のとおり記述してもダメでした。
Sass
1-moz-text-fill-color: transparent; 2-webkit-text-fill-color: transparent; 3text-fill-color: transparent;
=====================================================
【解決方法】
メモ用に。
教えていただいた内容で、下記の通りに修正し、safariでも問題なく表示されました。
デザイン上、左右に線を引く必要があったのでdisplay: flexを使用してます。
display: flexとbackground-clipを同時に利用するとsafariのバグで表示されなくなるようなので、
.mainTとspanを入れ子にし、記述を分けることでうまく対応することができました。
css
1.mainT { 2 margin-left: auto; 3 margin-right: auto; 4 5 display: flex; 6 align-items: center; 7 8 9 span { 10 color: #F7E3A5 !important; 11 background: -moz-linear-gradient(0deg, #AE9441, #F7E3A5, #AE9441); 12 background: -webkit-linear-gradient(0deg, #AE9441, #F7E3A5, #AE9441); 13 background: linear-gradient(0deg, #AE9441, #F7E3A5, #AE9441); 14 15 16 -moz-background-clip: text; 17 -webkit-background-clip: text; 18 background-clip: text; 19 20 21 -moz-text-fill-color: transparent; 22 -webkit-text-fill-color: transparent; 23 text-fill-color: transparent; 24 } 25}
回答1件
あなたの回答
tips
プレビュー