css中背景图如何设置平铺方式

这篇文章主要介绍了css中背景图如何设置平铺方式，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

专注于为中小企业提供网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业三门免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

css中可用background-repeat属性设置背景图的平铺方式，当值为“repeat”可向垂直和水平方向重复平铺，为“repeat-x”可向水平方向重复平铺，为“repeat-y”可向垂直方向重复，为“no-repeat”则不重复。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

默认情况下，如果一幅背景图像不足以占满整个容器时，就会在水平方向和垂直方向重复，以填满整个容器。然而，有时候却希望背景图像只出现一次，或只在某个方向上重复。

background-repeat属性的取值及含义
属性值	含义
repeat	默认值，图像在水平方向和垂直方向都重复以填满容器
repeat-x	图像只在水平方向重复以填满容器
repeat-y	图像只在垂直方向重复以填满容器
space	图像向两端对齐重复以填满容器，多余空间用空白代替
round	图像向两端对齐重复以填满容器，多余空间通过图像拉伸来填充
no-repeat	不重复，图像只显示一次

默认情况下，背景图像的填充区域为元素的 padding-box 区域，而背景图像平铺之后，其填充区域将是元素的 border-box 区域。

background-repeat属性需要 2 个参数，如果提供 2 个参数，第一个用于水平方向，第二个用于垂直方向。如果只提供 1 个参数，则同时用于水平方向和垂直方向。特殊值 repeat-x 和 repeat-y除外，因为 repeat-x 相当于 repeat no-repeat，repeat-y 相当于 no-repeat repeat，即 repeat-x 和 repeat-y 就等价于提供了 2 个参数值。

为了清楚了解 background-repeat属性在不同取值下的表现，这里针对每个取值定义了一个类，然后把它们分别应用到一个容器。

HTML代码如下：

div { width: 100px; height: 120px; border: 1px dashed #888; background-image: url(bg.png); } .repeat-x { background-repeat: repeat-x; } .repeat-y { background-repeat: repeat-y; } .repeat { background-repeat: repeat; } .space { background-repeat: space; } .round { background-repeat: round; } .no-repeat { background-repeat: no-repeat; }

新网创想网站建设，新征程启航

css中背景图如何设置平铺方式

其他资讯