css中图片平铺属性 |css 页面切换特效

在CSS中，有一种非常常见的样式属性——背景图片。而对于背景图片，有一个常用的属性——background-repeat。这个属性决定了背景图片在元素内的平铺方式。 该属性可选的属性值包括： · repeat（默认值）：图片在水平和垂直方向上平铺。 · repeat-x：图片在水平方向上平铺，而在垂直方向上不做平铺。 · repeat-y：图片在垂直方向上平铺，而在水平方向上不做平铺。 · no-repeat：图片不做平铺，只出现一次。 示例代码如下：

div{
background-image: url("example.jpg");
background-repeat: repeat;
}

上述代码将一个名为“example.jpg”的图片作为div元素的背景图片，并保证该图片在水平和垂直方向上均匀平铺。 需要注意的是，当用背景图片填充一个元素时，如果该元素的指定尺寸小于图片的实际尺寸，那么图片会自动进行裁剪或缩放以适应指定尺寸。要避免此问题，可以使用background-size属性来设置背景图片尺寸，或者选择一个尺寸与元素匹配的图片。 总之，CSS中的background-repeat属性提供了一种方便且强大的方式来控制背景图片的平铺方式，可以让你轻松地创建各种复杂的视觉效果。