如何使用CSS让背景图片不重复
在网页设计中，我们经常使用背景图片来美化网页，但是当背景图片过小或者网页需要无限滚动时，我们希望背景图片不重复出现。这时，我们就需要用到CSS的background-repeat属性来设置背景图片不重复。
1. background-repeat属性
CSS的background-repeat属性用于控制背景图片的重复方式。默认情况下，背景图片会在水平和垂直方向上平铺。如果我们只希望背景图片在水平方向或者垂直方向上重复，或者完全不重复，就需要使用该属性。
该属性可以有以下几个取值：
repeat：默认值，背景图片在水平和垂直方向上平铺
repeat-x：背景图片在水平方向上重复
repeat-y：背景图片在垂直方向上重复
no-repeat：背景图片不重复
下面是使用SCSS编写的背景图片不重复的示例代码：
body {
/* 此处使用背景图 */
background-image: url("bg.png");
/* 不重复 */
background-repeat: no-repeat;
/* 水平垂直方向都居中 */
background-position: center center;
/* 按照高度全屏 */
background-size: auto 100%;
}
2. background-size属性
CSS的background-size属性用于控制背景图片的大小。默认情况下，背景图片按照自己的原始大小显示。如果我们希望背景图片缩放到适应父元素或者按照一定的比例缩放，就需要使用该属性。
该属性可以有以下几个取值：
auto：默认值，按照背景图片的原始大小显示
cover：保持背景图片宽高比例不变，缩放背景图片以铺满父元素
contain：保持背景图片宽高比例不变，缩放背景图片以适应父元素
长度：设置背景图片的宽度为长度值，高度按照原始宽高比例计算
百分比：设置背景图片的宽度为父元素宽度的百分比，高度按照原始宽高比例计算
下面是使用SCSS编写的背景图片不重复且适应父元素高度的示例代码：
body {
/* 此处使用背景图 */
background-image: url("bg.png");
/* 不重复 */
background-repeat: no-repeat;
/* 水平垂直方向都居中 */
background-position: center center;
/* 宽度全屏，高度适应父元素 */
background-size: 100% auto;
}
3. background属性
为了方便设置背景图片不重复和适应父元素大小，CSS3新增了background属性，可以一次性设置多个背景图片相关的属性。
该属性可以有以下几个取值：
background-color：设置背景颜色
background-image：设置背景图片的URL
background-repeat：设置背景图片的重复方式
background-attachment：设置背景图片随页面滚动或者固定不动
background-position：设置背景图片的位置
background-size：设置背景图片的大小
下面是使用SCSS编写的背景图片不重复且居中适应父元素的示例代码：
body {
/* 使用背景色 */
background-color: #f1f1f1;
/* 使用背景图 */
background-image: url("bg.png");
/* 不重复 */
background-repeat: no-repeat;
/* 水平垂直方向都居中 */
background-position: center center;
/* 宽度全屏，高度适应父元素 */
background-size: 100% auto;
}
4. 总结
通过使用CSS的background-repeat和background-size属性，我们可以轻松地控制背景图片的重复和大小，并且可以使用background属性一次性设置多个背景图片相关的属性，让网页看起来更加美观。