CSS如何平铺一张背景图？
在网页设计中，为网页
添加背景图是十分常见的。但是有时候对于
一个宽高都不够大的背景图而言，无法完美地覆盖整个
页面。今天我们就来学习一下如何平铺一张背景图。
在CSS中，使用background
属性可以为网页
添加背景图，同时还可以控制它的大小、位置等。当我们想要平铺一张背景图时，我们可以通过background-repeat
属性来实现。
- repeat
属性值
background-repeat
属性中有多种值可供选择，我们先来看一下repeat
属性值。这个值表示重复铺满整个背景。
例如，我们有
一个200px × 150px大小的背景图，我们想要将它重复平铺填满整个
页面，可以使用如下
代码：
pre{
background-image: url('bg.jpg');
background-repeat: repeat;
}
- repeat-x
属性值
除了将背景图完整地重复覆盖整个
页面外，我们也可以将它只在
一个方向上进行重复。repeat-x
属性值表示在水平方向上进行重复。
例如，我们有
一个380px × 150px大小的背景图，我们只希望将它水平方向上平铺，可以使用如下
代码：
pre{
background-image: url('bg.jpg');
background-repeat: repeat-x;
}
- repeat-y
属性值
与repeat-x类似，我们还可以使用repeat-y
属性值来实现垂直方向的平铺重复。
例如，我们有
一个150px × 400px大小的背景图，我们只希望将它垂直方向上平铺，可以使用如下
代码：
pre{
background-image: url('bg.jpg');
background-repeat: repeat-y;
}
- no-repeat
属性值
如果我们不希望背景图进行重复，可以使用no-repeat
属性值。
例如，我们有一张500px × 300px大小的背景图，只想在网页的
左上角显示它，可以使用如下
代码：
pre{
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: left top;
}
在这里，我们使用background-position
属性控制了背景图在网页的位置。
总结
通过使用background-repeat
属性，我们可以实现对背景图的平铺重复。常用的
属性值
包括repeat、repeat-x、repeat-y和no-repeat等等。掌握了这个技巧，我们可以更加灵活地使用背景图来提升网页的视觉
效果。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
