如何在CSS中实现背景图片？
CSS是层叠样式表的缩写。
它是一种简单但函数强大的设计语言，能够转换网页。
简而言之，它简化了使网页可呈现并借助HTML吸引用户的过程。
CSS属性中的背景图片
有许多属性可用于控制图像的行为和位置。
这些属性是：
背景图像
背景重复
背景附件
背景位置
背景尺寸
背景颜色
我们将熟悉这些属性中的每一个，并通过一些有趣的演示来了解何时以及如何使用它们。
CSS中的背景图片
顾名思义，background-image属性仅用于通过网页中的元素指示和设置背景图像。
默认情况下，背景图像位于元素的左上角。
语法：背景图像：url |无|线性渐变|径向渐变；
<html>
<head>
<style>
body {
background-image: url("apple.jpg");
}
</style>
</head>
<body>
<h3>background using url</h3>
</body>
</html>
让我们了解一下参数：
- url：此参数的输入允许我们指定任何图像的文件路径或者需要设置为背景的图像URL。为了声明多个图片，请使用逗号分隔符来分隔网址。
body {
background-image: url("apple.jpg");
}
- none：这是属性的默认值，如果指定了背景图像，则不会渲染背景图像。
body {
background: none;
}
- linear-gradient()：将背景图像设置为线性渐变。至少需要为此属性指定至少两种颜色，例如：从上到下。
body {
background-color:#001;
background-image: linear-gradient(white 15%, transparent 16%),
linear-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
radial-gradient()：背景图像设置为径向渐变。至少需要为此属性指定至少两种颜色，例如：中心到边缘。
body {
background-color:#001;
background-image: radial-gradient(white 15%, transparent 16%),
radial-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
repeating-linear-gradient()：重复线性梯度。让我们使用上面在线性梯度中看到的相同示例来重复线性梯度，然后看看差异。
body {
background-color:#001;
background-image: repeating-linear-gradient(white 15%, transparent 16%),
repeating-linear-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
- repeating-radial-gradient()：它重复一个径向渐变。让我们来探索上面在径向渐变中使用的相同示例。
body {
background-color:#001;
background-image: repeating-radial-gradient(white 15%, transparent 16%),
repeating-radial-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
Fallback背景
始终建议我们添加背景颜色作为后备选项，以作为专业技巧。
尤其是当背景图片没有加载或者在开发时设置的渐变背景不受某些旧浏览器支持时，它特别有用。
这不会破坏用户体验，可以这样声明：
body {
background: url(apple_lost.jpg) pink;
}
多个背景
我们还有一个选项可以设置多个背景图像，在大多数情况下，例如前景和背景图像，这是必需的。
图像的顺序在这里很重要，首先声明应该在最前面的图像，然后声明应该在最后面的图像。
以下是多个背景图像的示例：
body {
background-image: url("small-heart.jpg"), url("background.jpg");
}
背景重复
background-repeat属性与background-image一起使用，以定义图像的重复行为。
它指定是否以及如何重复背景图像。
默认情况下，背景图像在垂直和水平方向都重复。
可能的值为：
重复-图像在水平和垂直方向重复
不重复图像不重复
repeat-x图像水平重复
重复-y垂直重复图像
间隔-重复图像，中间留有均匀的间隔或者间隙。
round重复图像以填充区域，它们之间没有任何缝隙。
background-repeat属性CSS语法为：
background-repeat：重复| repeat-x | repeat-y | no-repeat | space | round;
body {
background-image: url("heart.png"), url("background.png");
background-repeat: repeat-y, repeat-x;
background-color: #ffffff;
}
背景附件
background-attachment属性与background-image一起使用，以指示在内容滚动时图像是否应该滚动。
它表示背景图像应该是固定的，或者应相对于浏览器窗口视图与文档一起滚动。
默认值为滚动。
可能的值为：
滚动图像与页面一起滚动。
已修复图像将不会随页面滚动
后台附件CSS语法为：
背景添加：滚动固定；
body {
background-image: url("heart.png"), url("background.png");
background-repeat: space, round;
}
背景位置
background-position属性用于表示背景图像的位置或者位置。
可能的值为：
最佳
正确的
底部
剩下
中央
这些值的组合(例如，左上)
背景位置CSS语法为：
背景位置：顶部|右侧|左侧|底部|中心；
body {
background-image: url("heart.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
CSS大小的背景图片
此属性是最有用的属性之一，因为它允许我们控制背景图像的大小。
我们可以使用此属性使用不同的组合，并相应地获取结果。
默认值为自动。
以下值可以与background-size一起使用：
汽车
图片的长度，高度和宽度，例如20px 40px。
图像的高度和宽度百分比，以不带父元素的百分比表示，例如50％50％。
居中-将图像对准居中
覆盖，缩放图像以完全覆盖背景区域。
包含，缩放图像以适合其实际高度和宽度。
背景位置CSS语法为：
背景大小：值；
body {
background-image: url("heart.png"), url("background.png");
background-repeat: no-repeat, repeat;
background-size: 400px 150px, cover;
}
body {
background-image: url("heart.png"), url("background.png");
background-repeat: no-repeat, repeat;
background-size: contain, 400px 150px;
}
背景颜色
这是CSS中所有属性中最简单的一种。
它将纯色应用于页面背景。
可以用颜色(例如红色，蓝色等)，十六进制值和RGB值指定此属性的值。
background-colorCSS语法为：
background-color：值；
body {
background-image: url(small-heart.jpg);
background-color: #22a8e3;
}
