CSSバックグラウンドリピート
記事のディレクトリ
CSS background-repeat
デフォルトでは、background-imageプロパティは水平方向と垂直方向の両方で画像を繰り返します。
一部の画像は、水平方向または垂直方向にのみ繰り返すのに適している必要があります。そうしないと、以下に示すように、奇妙に見えます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>奇怪的背景图片...</p>
</body>
</html>
水平方向に繰り返します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/i/css/gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>在这里，背景图像仅在水平方向上重复！</p>
</body>
</html>
背景-繰り返し：繰り返し-x;