文本渐变在 Edge 和 Safari 中不起作用答案

【问题标题】：Text Gradients Not Working in Edge and Safari文本渐变在 Edge 和 Safari 中不起作用
【发布时间】：2021-03-18 12:39:18
【问题描述】：

我正在尝试在 WordPress 中创建文本渐变（我正在使用 SiteOrigin 页面构建器），但它在 Edge 或 Safari 中不起作用；文本在任一浏览器中都没有颜色。

我尝试了以下建议： CSS3 Text Gradients not working? Gradient not working in Safari

但这两种解决方案都只给了我一个线性背景渐变，而不是文本渐变。

这是我目前使用的代码：

<style>
.flip-up {
  /*background: linear-gradient(90deg, #97b3e1ff, #c5c95df0);*/
    background-image: linear-gradient(90deg, #97b3e1ff, #c5c95df0);
    -o-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
  -webkit-background-clip: text;
    -o-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
</style>

文本动画已经过自己的测试（我使用的是滚动触发动画插件）；它们在每个主要浏览器中都可以正常工作，所以我知道这不是问题。我的网站是https://douxdolci.com/（问题是“负担得起且有效”之类的标题）。任何帮助将不胜感激！

另外：如果没有办法做到这一点，有没有办法只在 Edge 和 Safari 中使用纯色文本，而在所有其他浏览器中使用渐变？

【问题讨论】：

标签： html css wordpress webkit

【解决方案1】：

你要做的是 display: block; 包含你想要颜色渐变的文本的元素。

请注意，这意味着您现在可能必须使用 line-height 属性将文本垂直居中，并使用 text-align 水平对齐文本。 . .

Safari 和 Edge 需要这种方式 - 不要想办法，去做吧！

this pen 中的标识显示了一个简单的示例。

如果它在 Safari 中中断，请告知 - 我不寒而栗地想象 Lambda Test 可能会如何呈现它。

HTML

<body>
    <header>
      <div class="logodiv">
        <div class="logo">
          <img src='https://images.unsplash.com/photo-1593003520833-5c874a3cef28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='My Logo'/>
        </div>
        <div class="logotext">
          <div class="logotext1">Coca-Cola</div>
          <div class="logotext2">The Real Thing</div>
        </div>
      </div>
            <nav>
                <ul class="navbar">
                    <li id="redlink" onclick="PAGE.switchPage('redlink')" class="link on">
                        RED
                    </li>
                    
                    <li id="whitelink" onclick="PAGE.switchPage('whitelink')" class="link">
                        WHITE
                    </li>
                    
                    <li id="bluelink" onclick="PAGE.switchPage('bluelink')" class="link">
                        BLUE
                    </li> 
          
                </ul>
        
            </nav>  
        
        </header>
        
        <article>
            <section id="redpage" class="redpage band">
        THIS IS RED PAGE FULL OF STUFF
            </section> 
            <section id="whitepage" class="whitepage band hidden">
                THIS IS WHITE PAGE FULL OF STUFF
            </section> 
            <section id="bluepage" class="bluepage band hidden">
                THIS IS BLUE PAGE FULL OF STUFF
            </section> 
        </article>
        
    <footer>
      <div class="foot-cont">Oh . . . What An Awful Footer !
      </div>
    </footer>
</body>

CSS

html {
    writing-mode: horizontal-tb;
    box-sizing: border-box;     /* Keeps borders inside the element bounds. */
    font-size: 62.5%;           /* Allows 1 rem = 10px in child and nested elements */
}

*, *:before, *:after {
    box-sizing: inherit;
}

* {
      margin: 0;
    padding: 0;
}


body{
    text-align: center; 
    margin: 0 auto;
    height: auto;
    font-family: Open Sans, sans-serif;
    font-size: 1.4rem;
    color: #000; 
    background-color: orange;
}

header{
  margin: 0 auto;
    display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
    width: 95%;
    height: 150px;
    font-weight: bold;
    text-align: left;
}

.logodiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  width: 45%;
  height: auto;
}

.logo {
  width: 30%;
  height: auto;
}

.logo img {
  width: 70%;
  height: 100px;
}

.logotext {
  display: flex;
  flex-flow: row wrap;
  justify-cintent: center;
  align-content: center;
  align-items: center;
  width: 70%;
  height: auto;
  font-size: 5.0rem;
}

.logotext1 {
  display: block; /* VITAL for Safari & Edge */
  width: 100%;
  height: 80px;
  line-height: 1.0;
  font: Lora;
  color: red;
  background-image: -webkit-linear-gradient(45deg, purple, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logotext2 {
  display: block; /* VITAL for Safari/Edge */
  width: 100%;
  height: 35px;
  line-height: 1.0;
  font-size: 3.0rem;
  font-style: italic;
  letter-spacing: 0.3rem;
  background-image: -webkit-linear-gradient(45deg, #111B61, #C8A2C8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

nav{
    display: block;
    width: 55%;
} 

.navbar{
    display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
    width: 100%;
    height: 40px;
    list-style-type: none;
    text-align: justify;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #FFFFFF;
}

nav li {
  position: relative;
  width: auto;
  height: 40px;
  margin-left: 15%;
  cursor: pointer;
}

nav li::after {
   position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    content: '';
    height: 2px;
    width: 0;
    background-color: #00FFFF;
    opacity: 1;
    transition: height 1300ms, opacity 1300ms, width 1300ms;
}

nav li:not(.on):hover::after {
  width: 100%;
  height: 2px;
  opacity: 1;
}

.on::after {
    text-decoration: none !important;
    cursor: none;
} 

.on::after{
    width: 100%;
  height: 2px;
  opacity: 1;
}

.on {
    cursor: none;
    pointer-effects: none;
}


article{
  width: 95%;
  margin: 0 auto;
}

.band{
    height: 800px;
  font-weight: 600;
  font-size: 4rem;
  color: gold;
  text-align: center;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  
}

.hidden{
    display: none;
}

.redpage{
    background-color: #FF0000;
}

.whitepage{
    background-color: #FFFFFF;
}

.bluepage{
    background-color: #0000FF;
}

footer{
  margin: 0 auto;
  width: 95%;
  text-align: center;
  height: auto;
  background: #000;
}

.foot-cont{
  height: 100px;
  font-size: 1.4rem;
  font-style: italic;
  color: #FFF;
  display: flex;           /* Important here, heh-heh */
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

const PAGE = ( () =>
{
  const switchPage = (pagelink) =>
  {
    const onLink = document.getElementsByClassName("on")[0];                // Find current nav link element
    const oldPageId = (onLink.id).substring(0,                        // Get id of corresponding page ...
                          (onLink.id).length - 4) + "page";             // ... by replace "link" with "page" 
    const newPageLink = document.getElementById(pagelink);                  // Find new nav link, i.e. link clicked on
    const newPageId = (newPageLink.id).substring(0, 
                          (newPageLink.id).length - 4) + "page";        // Deduce id of corresponding page
    if (oldPageId != newPageId)                                                                         // Only reload when clicking on different page
    {
      onLink.classList.remove("on");                                                                // Remove active status from old nav link
      newPageLink.classList.add("on");                                                          // Show new nav link as active page
      document.getElementById(oldPageId).classList.add("hidden");       // Hide old page content
      document.getElementById(newPageId).classList.remove("hidden");    // Display current page content
    }
  }
  
  return { switchPage: switchPage };
  
}) ();

【讨论】：

为什么，哦，为什么 SO 坚持要在 CodePen 中列出代码？为什么我们不能只提供笔的链接并保留它？

【解决方案2】：

flex 或 inline-flex 是问题所在。当您使用 flex 元素时，文本渐变不起作用。而是：使用block 或inline-block。

对不起，我用 TailwindCSS 很久了。

【讨论】：