A variety of background properties
1.background-image as a background image element property.
Background elements occupy the entire size of the element, including padding and borders, but does not include margins.
By default, the background picture elements located in the upper left corner, and repeated in the horizontal and vertical directions.
Tip: Set one of the available background color, so, if the background image is not available, the page also get a good visual effect.
Property Value:
URL ( 'the URL') path to the image.
none default. It does not display the background image.
inherit provisions should inherit the background-image property settings from the parent element.
2.background-size attribute of a predetermined size of the background image.
语法:
background-size: length|percentage|cover|contain;
Property Value:
length setting of the height and width of the background image. A first width value, the second value is set height. If only one value, the second value is set to "auto".
percentage as a percentage of the parent element to set the width and height of the background image. A first width value, the second value is set height. If only one value, the second value is set to "auto".
extended to cover the background image is large enough so that the background image is completely cover the background. Some portions of the background image may not be displayed in the background region is positioned.
expanded to contain the maximum image size, so as to fully adapt to the width and height of the content area.
3.background-repeat property to whether and how to repeat a background image.
By default, the background image is repeated in the horizontal and vertical directions.
Property Value:
REPEAT default. Background image will be repeated in the vertical and horizontal directions.
repeat-x background image will be repeated in the horizontal direction.
repeat-y background image will be repeated in the vertical direction.
no-repeat the background image is displayed only once.
inherit provisions should inherit the settings of background-repeat property from the parent element.
Whether 4.background-attachment properties with the background image fixed or scrolling rest of the page.
Property values:
the Scroll default. Background image will move with the rest of the page scroll.
When the page when the rest of the fixed scroll, the background image does not move.
inherit provisions should inherit the setting background-attachment property from the parent element.
Property 5.background-position of the starting position of the background image.
This property sets the background of the original image (defined by background-image) location, if you want to repeat the background image, it will start.
Tip: You need to set the background-attachment property is "fixed", in order to ensure that the property works fine in Firefox and Opera.
Property values:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
（如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。）
x% y%
（第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。）
xpos ypos
（第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。）
二、关于垂直对齐方式和过渡属性的拓展讲解
1.vertical-align 属性设置元素的垂直对齐方式。
属性值:
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
2.transition 属性是一个简写属性，用于设置四个过渡属性：
语法：
transition: property duration timing-function delay;
属性值:
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
(1).transition-property代表的属性值以及相关用法(规定设置过渡效果的 CSS 属性的名称)
语法:
transition-property: none|all|property;
属性值:
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
(2).transition-duration代表的属性值以及相关用法(规定完成过渡效果需要多少秒或毫秒)
语法:
transition-duration: time;
属性值:
time
规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
(3).transition-timing-function代表的属性值以及相关用法(规定速度效果的速度曲线)
语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
属性值:
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
(4).transition-delay代表的属性值以及相关用法(规定过渡效果何时开始)
语法:
transition-delay: time;
属性值:
time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
三、渐变
1.什么是渐变？
两种或者多种颜色间平滑度过的效果。
2.分类：
(1).线型渐变
(2).径向渐变
(3).重复渐变 加上 repeating
3.渐变的组成
(1).线型渐变
色标：决定了渐变的每种颜色及出现的位置
每个渐变效果都是由多个色标组成（2个以上）
语法：linear-gradient([<angle(方向)> | to <side-or-corner(角度大小)>]? , <color-stop-list(起始颜色)>)
属性值:
angle:
to top 从下往上
to bottom 从上往下
to left 从右往左
to right 从左往右
to top right 从左下往右上
to top left 从右下往左上
to bottom right 从左上往右下
to bottom left 从右上往左下
side-or-corner:
接受一个表示角度的值（可用的单位deg、rad、grad或turn）
0deg(度) 对应 to top
90deg 对应 to right
180deg 对应 to bottom
270deg 对应 to left
中途省略的是渐变颜色的第一个颜色为起始颜色(若只有一个颜色值则这个颜色为终止点的颜色)
在第一个和最后一个颜色之间的颜色为中间色，所有颜色会以设定的方向在未给予颜色区域大小的时候平均渐变颜色。
color-stop-list:<color-stop>=<color>I <dength>I <percentage>]
接受一系列颜色节点（终止点的颜色）
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。
(2).径向渐变
语法：radial-gradient([side] at [position]? , <color-stop-list(起始颜色)>)
属性值:
size ：
圆的半径 单位为px
position:x y
接受一个表示圆心的位置的值（可用的单位:px、百分比、top center bottom left right）
中途省略的是渐变颜色的第一个颜色为起始颜色(若只有一个颜色值则这个颜色为终止点的颜色)
在第一个和最后一个颜色之间的颜色为中间色，所有颜色会以设定的方向在未给予颜色区域大小的时候平均渐变颜色。
color-stop-list:<color-stop>=<color>I <dength>I <percentage>]
接受一系列颜色节点（终止点的颜色）
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。
(3).重复渐变
原有基础上加上加上 repeating
repeating-linear-gradient()(重复的线性渐变)
语法跟上面的 linear-gradient() 是一样的。
只不过 linear-gradient 后面没填充完的 地方用了最后一个颜色填充。
repeating-linear-gradient 他是用填充好的效果，重复填充 还没填充的地方
repeating-radial-gradient()(重复的镜像渐变)
语法和上面一样。
只不过 radial-gradient 后面没填充完的 地方用了最后一个颜色填充。
repeating-radial-gradient 他是用填充好的效果，重复填充 还没填充的地方
四、雪碧图和精灵图
雪碧图(将很多很多的小图标放在一张图片)、精灵图(经过background-position)
方法：
1.运用PS切图，把几个部分粘贴到一个图层，记下每个图片的大小，同时大的粘贴板宽取所有图宽的和，高取所有图中的最大值
2.运用背景图的方式插入，设置每个图片的div大小，同时通过调整图片位置background-position的方式达到准确添加背景图的目的
好处：
1.加快加载速度
2.后期维护简单
3.能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
4.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了
5.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
缺点：
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2、至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
3、由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
4、前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
以上“雪碧图与精灵图”解释转自CSDN博主「_52赫兹_」的原创文章
原文链接：https://blog.csdn.net/MYTLJP/article/details/78209698