2

初めての質問ですが、お手柔らかにお願いします

JQuery Mobile を使用する Web アプリの背景グラデーションを作成しようとしています。私は CSS と UI デザイン全般について無知です。

グラデーションでページ全体を塗りつぶしたい。現在、元のウィンドウのサイズまでいっぱいになっていますが、下にスクロールすると「途切れます」。

ほとんどの提案はこれを指しています：

html 
{
  height: 100%;
}

...これは私にはうまくいきません。これが私が持っているものです：

content: " ";
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: -1;
top: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 100%) fixed;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.5))) fixed;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%)fixed;
 background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;     background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
 background: linear-gradient(135deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
4

1 に答える 1

4

この問題は、 を使用しているときに時々発生しますheight:100%;。ブラウザ ウィンドウの 100% を埋めることを意味するため、残りは 100% を超えているため、埋めません。

少し手を加えて、次のように書いてみてください。

html 
{
  min-height: 100%;
}

これで 100% を超えて塗りつぶすことができるので、残りの背景を塗りつぶす必要があります。

于 2013-01-15T03:59:03.370 に答える