简体   繁体   中英

Linear gradient text not working in Safari

Made a linear gradient for my text headers and all of them work perfectly in Chrome, yet they don't show up in Safari. (It seems to still be in Safari but just transparent). Not quite sure what the issue is. I've referenced a countless amount of other posts but none have worked for me. For some reason, it's not even relying on my fallback color, if the linear gradient doesn't work. The best solution would be to make the linear gradient text appear in Safari, but setting a fallback color could also work.

Any help would be much appreciated. Thanks!

 h2{ font-family: 'Inter' , 'Open Sans', Times, sans-serif; font-weight: 600; font-size:2.5em; margin-top: 16px; line-height: 180%; white-space: nowrap; background: #1c92d2; background: -webkit-linear-gradient(to right, 1c92d2, #fbf8e9); background: linear-gradient(to right, #1c92d2, #fbf8e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 <h2>About Me</h2>

示例图像

I had the same case with multiple span's in a div. Setting display: block to the div and span's worked for me.

Can you please try to set display: block for your h2 ?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM