background-sizeとグラデーション

WebKitでbackground-sizeとグラデーションを合わせて利用しようとした所、どうも思い通りにいきませんでした。

まずはちゃんと表示できるパターン。

body{
	background-image : -webkit-gradient(linear, left top, right top , 
			from(rgba(255,255,255,0)), 
			color-stop(90%,rgba(255,255,255,0)), 
			color-stop(91%,#c7daf2), 
			to(#c7daf2));
	-webkit-background-size:11px;
	background-size:11px;
	background-repeat:repeat
}

こう行った感じで背景にストライプを描画しようとしています。

サンプル

これは「left top」から「right top」へのグラデーションですが、これを横向き、つまり「left top」から「left bottom」に変更するとグラデーションが描画されません。

body{
	background-image : -webkit-gradient(linear, right top, right bottom , 
			from(rgba(255,255,255,0)), 
			color-stop(90%,rgba(255,255,255,0)), 
			color-stop(91%,#c7daf2), 
			to(#c7daf2));
	-webkit-background-size:11px;
	background-size:11px;
	background-repeat:repeat
}

サンプル

困ったと色々と試しているとbackground-sizeの第２値を省略せずに記述するとちゃんと描画されるようになりました。

body{
	background-image : -webkit-gradient(linear, right top, right bottom , 
			from(rgba(255,255,255,0)), 
			color-stop(90%,rgba(255,255,255,0)), 
			color-stop(91%,#c7daf2), 
			to(#c7daf2));
	-webkit-background-size:11px 11px;
	background-size:11px 11px;
	background-repeat:repeat
}

サンプル

たしかにグラデーションでbackground-sizeの第２値を省略した場合、高さの算出方法がよくわからないですよね。

スポンサードリンク

«jQuery MobileでAjaxで取得したページでスタイルシートを反映させる | メイン | Re:jQueryでセレクタを再指定する方法»