背景图片相关设置

background-image:url(); 这个是背景图片的设置属性；

背景图片默认平铺，是会默认铺满整个容器：

比容器小的图片就会出现多个图片，像铺地砖一样出现在容器里；

比容器大的图片就会出现裁剪效果，默认优先显示图片的左上角；

平铺可以用 background-repeat:no-repeat（不平铺，只显示一个图像）/repeat-x（只在X轴上平铺）/repeat-y（只在Y轴上平铺）; 有三个属性值；

background-position:left/center/right/数值 top/center/bottom/数值; 这个背景属性有两个属性值，分别为前面所述，数值表示距离左侧边界和上部边界的距离，一般单位为px；

background-size:数值 数值; 这个属性用于设置背景图片的尺寸，该属性会把图片强行放大或缩小到这个尺寸；第一个属性表示横向尺寸，第二个数值表示纵向尺寸；这个数值还可以用百分比表示，表示图片的尺寸等于容器尺寸的百分比；

background-size:cover; 等比例放大或缩小图片，直到图片宽或高和容器一致并且完全占满容器为止；

（cover 示例：例如该图片高和容器一致了，但右侧有部分未显示出来，图片显示不完全；）

background-size:contain; 等比例放大或缩小图片，直到图片宽或高和容器一致并且完全放入容器为止；

（contain 示例：例如该图片宽和容器宽度一致了，图片完全放入容器中，但是会导致图片在容器中会有留白）

解决办法，让容器的宽高比与图片的宽高比相同就能解决；

background-attachment:scroll（跟随容器滚动，默认）/fixed（固定）; 背景图片相对屏幕的位置用这个属性设置；

background符合属性的书写顺序：背景颜色 背景图片路径 是否平铺 横向位置 纵向位置/尺寸；

背景原点：background-origin 属性

background-origin 属性：控制背景从什么地方开始显示。

格式举例：

    /* 从 padding-box 内边距开始显示背景图 */
    background-origin: padding-box;           //默认值
    /* 从 border-box 边框开始显示背景图  */
    background-origin: border-box;
    /* 从 content-box 内容区域开始显示背景图  */
    background-origin: content-box;

如果属性值设置成了border-box，那边框部分也会显示图片哦。

如下图所示：

background-clip属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面

格式举例：

background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是：

• border-box 超出 border-box 的部分，将裁剪掉
• padding-box 超出 padding-box 的部分，将裁剪掉
• content-box 超出 content-box 的部分，将裁剪掉

-webkit-background-clip:text 超出 文字 的部分，将裁剪掉 ，这是一个谷歌浏览器特有的CSS3属性，我们可以用这个实现纯CSS的文字渐变效果，需要注意，文字需要设置为透明；

假设现在有这样的属性设置：

    background-origin: border-box;
    background-clip: content-box;

上方代码的意思是，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。

opacity:整个标签都会加上透明度，包括里面的内容；

filter:alpha(opacity=50);对于IE9以下的版本的浏览器透明度要用这种写法；

background:transparent; 可以单独设置透明，但是是完全透明，不可设置透明度；

-webkit-filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() |
saturate() | sepia() | drop-shadow( radius )| url(); /chrome, safari, opera/
filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() |
saturate() | sepia() | drop-shadow( radius )| url();

可选值：

none，默认值，无效果。
blur(px)，高斯模糊。
brightness(%)，亮度。
contrast(%)，对比度。
grayscale(%)，灰度。
hue-rotate(%)，色相旋转。
invert(%)，反色。
opacity(%)，透明度。
saturate(%)，饱和度。
sepia(%)，褐色。
drop-shadow(radius)，阴影。
url()，URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。