【问题标题】：CSS gradient not working on iOSCSS渐变在iOS上不起作用
【发布时间】：2013-05-29 14:29:00
【问题描述】：

我使用 CSS 生成器创建了一个 gradient background。这在所有主要浏览器和 Android 上都能完美运行。但是在 iOS 中我得到this。

我需要在这个渐变中添加什么才能使其在 iOS 上运行？

编辑：因为这个问题没有引起足够的重视，所以我想问一个不同的问题：我需要什么 css 标签才能为 safari/ios 创建线性渐变，当，在这种情况下，-webkit-linear-gradient 不起作用？是否还有其他 css 渐变标签，专门用于 safari？

这是我的背景代码：

.gradient {
/* Legacy browsers */
background: #FF7701 url("gradient-bg.png") repeat-x top;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/* Internet Explorer */
*background: #FF7701;
background: #FF7701\0/;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
}
@media all and (min-width: 0px) {
    .gradient {
        /* Opera */
        background: #FF7701 url("gradient-bg.svg");
        /* Recent browsers */
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(#FFAD26),
            to(#FF7701),
    color-stop(0.5, #FEA026),
    color-stop(0.5, #FFFFFF),
    color-stop(0.5, #FFFFFF),
    color-stop(0.5, #FFFFFF),
    color-stop(0.5, #FF8B00)
        );
        background-image: -webkit-linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
        background-image: -moz-linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
        background-image: -o-linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
        background-image: linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
    }
}

【问题讨论】：

标签： ios safari mobile-safari css

【解决方案1】：

至少在移动版 Safari 中，不能使用关键字 transparent，而必须使用 rgba(255, 255, 255, 0)。

这里有描述：https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

如你所见，即使在苹果自己的官方文档中，也使用rgba(255, 255, 255, 0)而不是transparent。

【讨论】：

谢谢，这解决了我一直遇到的问题之一
这有效（至少在 iOS 8 上）并且是迄今为止最简单的解决方案。
谢谢。这对我有用，从透明褪色到纯色然后又变回来：linear-gradient(to right,rgba(255, 249, 240, 0), rgba(255, 249, 240, 1), rgba(255, 249, 240, 0))。现在在所有设备上看起来都很棒！
这对我也有帮助，谢谢！只有渐变在 iOS 上与 transparent 关键字有问题，还是其他属性也需要 rgba？
OP 没有使用transparent...我错过了什么吗？

【解决方案2】：

请在 iOS 中检查一下，但它应该可以工作：

background: #ffad26; /* Old browsers */
background: -moz-linear-gradient(top,  #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0 ); /* IE6-9 */

我还建议研究像 SASS 这样的预处理器，它会为你生成很多这样的东西。

备选方案 1

作为替代方案，您可以尝试使用嵌入框阴影。这并不准确，它有其局限性，但它只是一种选择:)

background-color:#FF8B00;
-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);

备选方案 2

如果您知道高度，请使用上面的框阴影或仅使用背景图片。这样，您将获得跨浏览器支持，而不会像上面那样有一百个前缀 CSS 属性：)

【讨论】：

嗯，我自己没有 ipad，所以一个朋友正在为我测试 ipad mini 和 ipad 3。在 mini 上它可以工作，但在 ipad 3 上不行......我现在已经应用了你的代码，你能帮我测试一下它是否适合你吗？检查：rickgommers.nl/geoffrey
见我上面的回复。它也无法正常工作。我想用赏金奖励你，但因此我们必须先解决这个问题:)
@Forza 尝试在元素上指定高度。例如，尝试 height:100%。如果这不起作用，我不确定除了我上面写的内容之外还有纯 CSS 的解决方案。如果这不起作用，我会使用图像并使用 background-repeat 平铺它：repeat-y;
那张图片很好用，哈哈。废话 CSS 在每个浏览器中的工作方式都不同......好旧的图像修复了它 :) Thx Rob！
@Forza 将此归咎于 CSS 是不公平的。每个浏览器都规定了它将支持多少 CSS 以及有多好。我相信你不会因为你曾经在 IE 上遇到的麻烦而责怪 W3C。

【解决方案3】：

工作演示在这里http://jsfiddle.net/yeyene/akRHX/

还有它的 iPhone 截图……

将你的 css 类添加到元素中。

HTML

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">

       <div class="ui-grid-a">
           <div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div>
            <div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div>
       </div>

</div><!-- /grid-a -->

    </div><!-- /content -->


</div><!-- /page -->

CSS

.gradient {
    /* Legacy browsers */
    background: #FF7701 url("gradient-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    /* Internet Explorer */
    *background: #FF7701;
    background: #FF7701\0/;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
    }
    @media all and (min-width: 0px) {
        .gradient {
            /* Opera */
            background: #FF7701 url("gradient-bg.svg");
            /* Recent browsers */
            background-image: -webkit-gradient(
                linear,
                left top, left bottom,
                from(#FFAD26),
                to(#FF7701),
        color-stop(0.5, #FEA026),
        color-stop(0.5, #FFFFFF),
        color-stop(0.5, #FFFFFF),
        color-stop(0.5, #FFFFFF),
        color-stop(0.5, #FF8B00)
            );
            background-image: -webkit-linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
            background-image: -moz-linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
            background-image: -o-linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
            background-image: linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
        }
    }

【讨论】：

【解决方案4】：

对我来说，以下工作有效，这在桌面浏览器、android 和 ios 中对我有效：-

display: list-item;
background-image: linear-gradient(45deg, #2b4bff, #1b681f);
background-clip: text;
color: rgba(255, 255, 255, 0);

我正在使用 display:flex，但它不起作用，我不得不更改列出项目。
我使用“透明”的颜色，现在我正在使用 rgba(255, 255, 255, 0)

一些有用的注释：属性 background-clip: text;仅当直接应用于您要设置样式的元素时，才能在 Safari 中使用。您不能将其应用于父元素并同时为所有子元素设置样式。（这在 Chrome 和 Firefox 中有效） enter link description here

【讨论】：