web-dev-qa-db-ja.com

CSSグラデーションがiOSで機能しない

CSSジェネレーターを使用して gradient background を作成しました。これは、すべての主要ブラウザとAndroidで完全に機能します。ただし、iOSでは this を取得します。

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

編集：この質問では十分な注意が払われていないため、別の質問をしたいと思います。この場合のように-webkit-linear-gradientが機能していない場合の、safari/iosの線形グラデーション特にサファリのために、他の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
        );
    }
}
iossafarimobile-safaricss
18
Forza

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

高さがわかっている場合は、上のボックスシャドウを使用するか、背景画像のみを使用してください。そうすれば、上記のように100個の接頭辞が付いたCSSプロパティである混乱なしに、クロスブラウザーのサポートが得られます:)

10
rob_mccann

少なくともモバイルサファリでは、キーワードtransparentは使用できません。代わりにrgba(255,255,255,0)を使用する必要があります。証明： https://developer.Apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

透明を検索すると、公式ドキュメントにも表示されますが、透明色にはrgbaを使用しています。

44
Pencilcheck

ここで作業デモ http://jsfiddle.net/yeyene/akRHX/

そして、そのiPhoneのスクリーンショット...

enter image description here

要素に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
            );
        }
    }
3
yeyene