グラデーションの繰り返しを指定する

2015年11月10日

グラデーションは繰り返して表示することができます。線形グラデーションを表示たいなら、repeating-linear-gradient()関数を、円形グラデーションはrepeating-radial-gradient()関数を使います。()内の引数は、どちらも繰り返さない時と同じです。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>グラデーションを繰り返して表示する</title>
	<style>
	div{
		width:200px;
		height:120px;
		margin:32px;
		color:white;
		font-weight:bold;
	}
	/*
		iOS6用に-webkit-をつける
	*/
	.graRep1{
		background:-webkit-repeating-radial-gradient(50px 50px,40px 40px,white,green,black);
		background:repeating-radial-gradient(circle 40px at 50px 50px,white,green,black);
	}
	.graRep2{
		background:-webkit-repeating-linear-gradient(left,red 0%,green 16%,blue 32%);
		background:repeating-linear-gradient(to right,red 0%,green 16%,blue 32%);
	}


	</style>
</head>
<body>
	<div class="graRep1">test1</div>
	<div class="graRep2">test2</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>グラデーションを繰り返して表示する</title>

<style>

div{

width:200px;

height:120px;

margin:32px;

color:white;

font-weight:bold;

}

iOS6用に-webkit-をつける

.graRep1{

background:-webkit-repeating-radial-gradient(50px 50px,40px 40px,white,green,black);

background:repeating-radial-gradient(circle 40px at 50px 50px,white,green,black);

}

.graRep2{

background:-webkit-repeating-linear-gradient(left,red 0%,green 16%,blue 32%);

background:repeating-linear-gradient(to right,red 0%,green 16%,blue 32%);

}

</style>

</head>

<body>

</body>

</html>