25

CSS ジェネレーターを使用してグラデーションの背景を作成しました。これは、すべての主要なブラウザーと Android で完全に機能します。ただし、iOSではこれを取得します。

iOS で動作させるには、このグラデーションに何を追加する必要がありますか?

編集:この質問は十分な注目を集めていないため、別の質問をしたいと思います: この場合のように、-webkit-linear -グラデーションが機能していませんか? 特にサファリ用の他の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

4 に答える 4

64

少なくともモバイル Safari では、キーワード を使用できません。代わりtransparentに使用する必要があります。rgba(255, 255, 255, 0)

これについては、https ://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html で説明されています。

ご覧のとおり、Apple 自身の公式ドキュメントでも、 のrgba(255, 255, 255, 0)代わりに が使用されていtransparentます。

于 2014-11-25T04:28:00.320 に答える