一、background-repeat属性默认值
在CSS中,背景图片可以通过background-image属性进行设置,但是图片大小通常与元素大小不匹配,这时候就需要使用background-repeat属性来对背景图片进行重复或平铺。background-repeat属性控制背景图片在元素内被平铺的方式。
background-repeat属性的默认值是repeat,表示背景图片在元素上下左右方向均平铺重复。
background-repeat: repeat; /* 默认值 */
二、background-clip属性
background-clip属性设置元素背景的绘制区域。默认情况下,背景绘制区域从border-box的外边缘开始,直到内边缘之间的区域。如果border-box被裁切,那么背景将不会在裁切区域中绘制。background-clip属性决定哪一部分的背景需要被绘制。
background-repeat属性与background-clip属性关联。如果background-clip设置为padding-box,而background-repeat的值为repeat或space,则图片将在padding-box内平铺,以防止图片重复裁剪。如果background-clip设置为border-box,则图片将在border-box内平铺。
/* 在text节点内绘制背景图像且仅在元素的padding框之内 */ background-clip: padding-box; /* 元素内的背景图像将在border区域内平铺 */ background-clip: border-box;
三、background-repeat属性的其他设置
除了默认的repeat重复平铺背景图片外,background-repeat属性还有以下几个设置。
1、no-repeat(不平铺)
no-repeat表示背景图片在元素内只显示一次,不进行重复。
background-repeat: no-repeat;
2、repeat-x(水平平铺)
repeat-x表示背景图片仅在水平方向上平铺重复,垂直方向上则不进行重复。
background-repeat: repeat-x;
3、repeat-y(垂直平铺)
repeat-y表示背景图片仅在垂直方向上平铺重复,水平方向上则不进行重复。
background-repeat: repeat-y;
4、space和round(重复间距)
space和round也是平铺重复背景图片,但是与repeat不同的是,它们会在图片之间留有一定的间距,同时调整图片大小。
space表示背景图片平均地进行平铺展开,同时调整图片尺寸使其与最佳宽度相同。round表示背景图片在元素区域内平铺展开,同时调整图片尺寸使其充满整个元素区域。
background-repeat: space; background-repeat: round;
小结
在CSS中,background-repeat属性有重复平铺、水平平铺、垂直平铺、不平铺、重复间距等设置。同时,background-repeat属性与background-clip属性关联,可以对背景图片进行更精细的控制。