时间戳

首页 > 解决方案 > 线性渐变仅适用于第一行文本？

css - 线性渐变仅适用于第一行文本？

问题描述

我正在使用背景：-webkit-linear-gradient() 结合其他一些样式（见下文）在英雄消息等中创建渐变文本。效果在每个主要的桌面浏览器中都很好，除了 IE（并且因为我正在使用 -webkit- 前缀来强制效果仅在 webkit 浏览器中激活并使 IE 回退到颜色样式）。

在 iOS 上（在带有 iOS Chrome 和 Safari 的最新 iPhone 8 Plus 上测试），该效果仅适用于第一行。例如，在下图中，我突出显示了“您的隐私”字样应该出现的位置。

问题的图像示例

这是代码：

h1 {
    color: #5a6afe;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
    background-size: 400%;
    animation: gradient 6s ease infinite;
    background-clip: text;
    -webkit-background-clip: text;
}

    @keyframes gradient {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
    }
<h1>Committed to your privacy</h1>

怎么回事？

标签： css

解决方案

您需要以linear-gradient不同的方式为您的 s 添加前缀。例如，您需要使用-webkit, the-moz和只是标准版本。像这样的东西：

background: -o-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
background: -moz-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
background: -webkit-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
background: -webkit-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
background: linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);

此外，出于某种原因，iOS Safari 不支持background-clipwith 。background-size根据 caniuse.com：

Opera Mini 中的部分支持是指不支持背景大小或背景附件。但是 Opera Mini 7.5 支持背景大小（包括封面和包含值）。

Safari 6 中的部分支持是指不支持边缘语法的背景大小偏移

h1 {
    color: #5a6afe;
    background: -o-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
    background: -moz-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
    background: -webkit-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
    background: -webkit-linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
    background: linear-gradient(-75deg, #10C6FF, #7636FF, #10C6FF, #7636FF);
    background-size: 400%;
    animation: gradient 6s ease infinite;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    @keyframes gradient {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
    }
<h1>Committed to your privacy</h1>

推荐阅读