html去图片平铺效果,css如何把图片平铺？

css如何把图片平铺？下面本篇文章给大家介绍一下使用css设置背景图片平铺方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

background-repeat属性用于定义背景图像如何重复，即背景图像的平铺方式。默认地，背景图像在水平和垂直方向上重复。

可选值有 repeat | repeat-x | repeat-y | space | round | no-repeat，默认值为 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代码如下：

CSS代码如下：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;

}

上述代码中，容器的宽度为 100px、高度为 120px，背景图像的宽度和高度都是 40px。为了能够清楚可见背景图像的范围，这里给容器增加了 1px 的虚线框，给背景图像增加了 1px 的黑色边框。运行结果如图：

从上图可以看出，图像都是按原始尺寸进行重复，来填满容器。在水平方向上，当容器的宽度不是背景图像宽度的整数倍时：如果取值为 space，多余空间用空白填充；如果取值为 round，背景图像会被缩放；如果为其他值，最后一幅图像可能不完整。垂直方向同理。

示例：

div{

margin: 20px;

}

.content1 {

border: 1px solid #000fff;

height: 200px;

background-image: url(../2018.12.15/2.jpg);

background-repeat: repeat;

}

.content2 {

border: 1px solid #000fff;

height: 200px;

background-image: url(../2018.12.15/2.jpg);

background-repeat: repeat-x;

}

.content3 {

border: 1px solid #000fff;

height: 200px;

background-image: url(../2018.12.15/2.jpg);

background-repeat: repeat-y;

}

.content4 {

border: 1px solid #000fff;

height: 200px;

background-image: url(../2018.12.15/2.jpg);

background-repeat: no-repeat;

}

效果图：

x轴和y轴方向平铺

x轴方向平铺

y轴方向平铺

不平铺

更多web前端相关知识，请查阅 HTML中文网 ！！