在这个实例中我们使用background-repeat性为背景添加水平重复图像,repeat-x是指图像水平重复,repeat-y是指图像垂直重复!
实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background-image:url(img/gradient_bg.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>水平重复的背景实例</h1>
<h1>Hello World!</h1>
<p>在这里,前景图像仅在水平方向重复。</p>
<body>
</html>
运行效果:
垂直重复背景图像
实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background-image:url(img/gradient_bg.png);
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h1>垂直重复的背景实例</h1>
<h1>Hello World!</h1>
<p>在这里,前景图像仅在垂直方向重复。</p>
<body>
</html>
运行效果:
评论