一、背景样式分为两种，一种是背景颜色（background-color），另外一种是背景图片（background-image）
--对于bakcground-color：就是选择好相应的盒子然后设置好它的颜色就可以了，通常设置的盒子标签有<span>等。案例如下：
<body>
<div class="box">
<h2>Background color</h2>
<p>Try to change your background color<span> from IFE</span></p>
</div>
</body>.box{
background-color:#567895;
}
h2{
background-color:black;
color:white;
}
span{
background-color:rgba(255,255,255,5);
}注：这里可能会出现一个问题，就是我们将vs code中的代码在chrome中显示，会出现localhost。
以及这个解决方案：https://stackoverflow.com/questions/52682446/visual-studio-code-debugger-with-chrome-refused-to-connect-to-localhost
--对于background-image：就是在背景中显示图像。如果我们的背景图片足够大的话，那么实际上这张照片会覆盖掉页面，并且这个图片是不会缩小来适应我们设置的框图。如果我们给的图片有点小，那么这个图片实际上会平铺这个页面。
我们可以通过设置background-repeat来控制背景平铺的样式，background-repeat的值包括：
no-repeat：不重复
repeat-x：水平重复
repeat-y：垂直重复
repeat：在两个方向重复
我们也可以通过background-size来控制背景图片的尺寸。在这里，我们可以使用的值有两个，一个是cover,一个是contain。
-cover：浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外。
contain：浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
我们可以使用background-position来选择将背景图片显示在盒中的位置。（默认的背景位置是（0，0）)。
常见的背景位置值有两个单独的值，一个水平值，一个垂直值。
渐变背景的设置：这里涉及到CSS数据类型的一个子类型：gradient——它被用于表现两种或多种颜色的过渡转变。
grandient值的可以分为三种：一种是线性渐变（linear-gradient），一种是径向渐变（radial-gradient）。还有一种是重复渐变（repeating-linear-gradient 或者repeating-radial-gradient）。线性渐变是说颜色沿着一条隐式的直线逐渐过渡；径向渐变是指颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值；重复渐变是指重复多次渐变图案直到足够填满指定元素。
我们通过使用background-attachment属性来控制背景是如何滚动的。它可以接受的值包括：
--scroll:背景图片位置固定，其他元素随着鼠标的滑动而滑动。
--fixed:背景图片固定，无论我们怎么滑动页面，背景图片位置都不发生变化。
--local:背景图片和元素固定在一起。当我们滚动元素的时候，背景图片也随着进行滚动。
