一、什么是CSS Background-Repeat
CSS Background-Repeat是一个用于设置CSS背景图片重复方式的属性。通过设置该属性，我们可以控制背景图片在某个元素的背景中如何重新排列，以达到不同的视觉效果。
该属性有多个值可以选择：
background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; background-repeat: space; background-repeat: round;
二、背景图片重复方式的选取
1、repeat
repeat是background-repeat属性默认值。它表示在水平方向和垂直方向都重复。
background-image: url("example.gif");
background-repeat: repeat;
2、repeat-x
repeat-x只在水平方向上进行重复。
background-image: url("example.gif");
background-repeat: repeat-x;
3、repeat-y
repeat-y只在垂直方向上进行重复。
background-image: url("example.gif");
background-repeat: repeat-y;
4、no-repeat
no-repeat是表示不重复，图片只显示一次。
background-image: url("example.gif");
background-repeat: no-repeat;
5、space
space使背景图片在水平和垂直方向上平铺，但是在最后一行或者一列上不完全平铺，所以没有边界。
background-image: url("example.gif");
background-repeat: space;
6、round
round与space类似，背景图片在水平和垂直方向上平铺，但是它自适应地改变背景图片的大小，以便它完全填满容器。
background-image: url("example.gif");
background-repeat: round;
三、背景图片重复的应用实例
CSS Background-Repeat可以为网页的美化添加更多的元素，下面是使用Background-Repeat的实例：
1、重复纹路，使你的网站看起来像质感更好的印刷品。
body {
background-image: url("example.gif");
background-repeat: repeat;
}
2、只在网站的头部添加一个公司标志。
#logo {
background-image: url("logo.gif");
background-repeat: no-repeat;
height: 120px;
width: 300px;
}
3、一个由图片组成的磁贴背景。
body {
background-image: url("example-image.png");
background-repeat: repeat;
background-color: #cccccc;
}
除此之外，可以将背景定为一张大图片，这样效果会非常惊人，尤其是在使用高清分辨率屏幕时。最后，需要特别注意的是：由于不同的元素有不同的大小，因此Background-Repeat合适的应用非常重要。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192948.html
微信扫一扫 
支付宝扫一扫 