jqueryモバイルとCSSの固定グラデーションはすべてのページで同じです

私はグラデーションを背景として使用し、フッターは下のグラデーションカラーと一致するいくつかのページを持っています。これにより、ダッシュボードページよりも長い第2ページがあり、フッターの色が一致しません。私は各ページごとに静的グラデーションを設定したいと思います。jqueryモバイルとCSSの固定グラデーションはすべてのページで同じです

あなたは

を見ることができるようにこれは私が背景のスタイルの方法です：

.background { 
    background-image: -webkit-linear-gradient(#00cef4,#00a0e5); 
    background-repeat:repeat-x; 
    background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
}

、これはフッターのスタイリングです：

.ui-footer { 
    background-image: linear-gradient(#00a6e7, #00a0e5); 
    border-color: transparent !important 
} 

.footer a:after { 
    background-color: transparent !important; 
    /*border-color: transparent !important;*/ 
    height: 70px; 
} 

.ui-footer, .footer, .footer li, .footer a { 
    height: 70px; 
}

出典

2016-12-01 Sreinieren

スタート下から勾配...最も簡単な！ –

@ハリーそれは、ページをスクロールすると、フッターの下のコンテンツがブリードする原因になります。 @Beginnerprogrammer 'background-attachment：fixed'を試しましたか？または、100vw 100vh（画面幅の100％、画面の高さの100％）で背景サイズをサイジングできますか？ –

@ハリーそのアイコンは、背景が表示されないコンテンツの前にアイコンが配置されるため、明らかに機能しません。 – Sreinieren

これを試すことができます。
は、2節で、ビューポートを区切る：

HTML：

<body> 
    <div class="content">everything goes here</div> 
    <div class="footer">buttons go here </div> 
</body>

CSS：

.content{ 
    height: 100vh; /* full display size */ 
    overflow-y: auto; /* everything bigger will scroll like normal */ 
    padding-bottom: 45px; /* Whatever height you give the icon section */ 
    box-sizing: border-box; /* this + the padding will make sure your content stops extactly where the footer sta */ 
} 
.footer{ 
    position: absolute; 
    bottom: 0; 
    height: 45px; 
} 
body{ 
    /* gradient stuff here */ 
}

出典

2016-12-01 16:29:29

-1

色の不一致メインセクションの高さのためではありません&フッター - この部分は、あなたがそれをやったようにうまくいきます。

あなたの主な問題は、あなたのグラデーションカラーの順ある - グラデーションの色の順番が非常に正確であることを一致していません。

説明：

現在ご注文は

lightest - color 1 - main start 
... 
..darker.. 
..darker.. 
.. 
darkest - color 2 - main end 
lighter - color1 - footer start(this is the mismatch - this should be the same color as the last(darkest)) 
..darker.. 
..darker.. 
darkest - color 2 - footer end

あるので、右の順序は

lightest - color 1 - main start 
... 
..darker.. 
..darker.. 
.. 
darkest - color 2 - main end 
darkest - color2 - footer start 
..even more darker.. 
..even more darker.. 
darkest - color 3 - footer end

（下記）でなければなりませんソリューション

チュst フッターのグラデーションの色をスワップに一致させてください。ように

.ui-footer { 
    background-image: linear-gradient(#00a0e5, #00a6e7); //colors swapped to match main sections color 
    border-color: transparent !important 
}

出典

2016-12-01 16:28:21

jqueryモバイルとCSSの固定グラデーションはすべてのページで同じです

答えて

関連する問題