背景图片的标签

1. background-image:设置元素的背景图片

                              url("图片路径")

              注意：

              当图片比较小时，默认会以平铺的方式铺满整个背景区域。

              平铺：

                 图片会在水平和垂直俩个方向上重复出现，直至背景区域填充完整。

 代码如下;

 

2.background-repeat:设置背景图片是否重复显示

             当背景图片的尺寸小于元素尺寸时，背景图片会重复显示知道铺满整个元素。

                  值：

                     repeat：默认值，平铺/重复出现。

                     no-repeat:不重复。

                    repeat-x：水平平铺。

                    repeat-y：垂直平铺。

                    space:保持图片的大小平铺整个背景区域，剩余空间做为图片之间的间隙平分。

                    round：保持图片的完整性，根据背景区域图片相对应拉伸填充。

 代码如下;

 

3.background-attachment:设置背景图片是否固定。

                背景图片是否随着页面的其他部分滚动。

                   值：

                       scroll：默认值，背景图片会随着滚动条而滚动。

                       fixed：背景图片不会随着滚动而滚动。

 代码如下;

 4. background-position:设置背景图片横向和纵向的位置，默认为0 0.   设置为50%可以实现居中

       代码如下;

5.  background-size: 设置背景图片的尺寸，分别表示宽和高。

                图片的大小仅设置一个方向，另一个方向根据图片大小自动缩放。

                    值：

                        contain：根据容器的最小值设置图片，将图片进行比例缩放，图片会始终包含在                                             容 器之内，容器范围可能不被完全占用。

                        cover：根据容器的最大值设置图片的大小，将图片比例缩放至完全覆盖整个容                                             器，图片可能会超出容器。

                        -数值：第一个值为X轴(宽度)，第二个值为Y轴(高度)。

                            单位：

                                px：像素，固定的大小。

                                %：百分比，以容器的大小作为标准进行计算。

                        -值为一个：该值将作用于X轴(宽度)位置，高度为auto，此时的背景图片高度以X                                               轴(宽度)作为参考进行比例缩放。

                                      背景图片尺寸可以通过100%，设置为和元素等宽等高。

  代码如下：