Css入门: background-repeat（背景图片重复方式）

背景图片重复方式

CSS的background-repeat属性用于控制背景图片在元素中的重复方式。通过设置不同的属性值，可以实现不同的背景图片重复效果。

创新互联公司长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为桃源企业提供专业的成都做网站、成都网站建设，桃源网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

属性值

background-repeat属性有以下几个常用的属性值：

• repeat: 默认值，背景图片在水平和垂直方向上平铺重复。
• repeat-x: 背景图片在水平方向上平铺重复，垂直方向上不重复。
• repeat-y: 背景图片在垂直方向上平铺重复，水平方向上不重复。
• no-repeat: 背景图片不重复，只显示一次。

示例

以下是一些使用background-repeat属性的示例：

示例1：

HTML代码：

CSS代码：

.example1 {
  width: 200px;
  height: 200px;
  background-image: url("background.jpg");
  background-repeat: repeat;
}

效果：背景图片在元素中水平和垂直方向上平铺重复。

示例2：

HTML代码：

CSS代码：

.example2 {
  width: 200px;
  height: 200px;
  background-image: url("background.jpg");
  background-repeat: repeat-x;
}

效果：背景图片在元素中水平方向上平铺重复，垂直方向上不重复。

示例3：

HTML代码：

CSS代码：

.example3 {
  width: 200px;
  height: 200px;
  background-image: url("background.jpg");
  background-repeat: repeat-y;
}

效果：背景图片在元素中垂直方向上平铺重复，水平方向上不重复。

示例4：

HTML代码：

CSS代码：

.example4 {
  width: 200px;
  height: 200px;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

效果：背景图片不重复，只显示一次。

总结

通过CSS的background-repeat属性，我们可以控制背景图片在元素中的重复方式。根据不同的需求，可以选择合适的属性值来实现不同的背景图片重复效果。

香港服务器选择创新互联

创新互联是一家专业的云计算公司，提供香港服务器、美国服务器和云服务器等产品。作为香港服务器的选择品牌，创新互联提供稳定可靠的服务器解决方案，满足用户的不同需求。

文章名称：Css入门:background-repeat（背景图片重复方式）
链接地址：http://gydahua.com/article/dphpcog.html