CSS的background效果集合

为什么背景不能继承

假设背景能继承，而且向背景中应用了一个背景图像，那么，这个图像将应用于文档所有元素的背景，而且每个元素都完成了自己的平铺，这并不是我们想要的效果。

注意：模式在每个元素的左上角都重新开始，也包括链接。这并不是大多数创作人所要的，正因如此，背景属性不能继承

如果出于某种原因确实想要这样的效果效果：
*{background-image: url(图片.png)}

关于背景的良好实践：避免由于某些原因图片无法加载，而出现全白的背景影响浏览效果，因此在使用背景图像的同时再指定一个背景颜色，这样至少能保证一种清晰的效果。

有重复的方向background-repeat

1. repeat：图像水平垂直方向上都平铺（默认值）
2. repeat-x：图像在水平方向上重复
3. repeat-y：图像在垂直方向上重复
4. no-repeat：不允许图像在任何方向上平铺

语法：background-repeat:repeat | repeat-y | repeat-x | no-repeat ;
妙用：

1. 一个小图像在顶部水平方向重复，就可以得到一个 顶端重复下面白色的效果
2. 也可以在h1或者更多元素上水平重复图片，就会有意想不到的效果

背景定位 background-position

语法：
background-position : length || length

1. length :百分数 | 由浮点数字和单位标识符组成的长度值
2. position :top | center | bottom | left | center | right

background-position : position || position
如果只出现了一个关键字，则认为第二个关键字事center；

默认值为： 0% 0%
该属性定位不受对象的补丁属性( padding )设置影响

background-position:50% 50%;与background-position:center center;效果相同
妙用：

1. 可以先制作一张宽度足够宽图片设置水平值为50%，这样可以用来适应不同的浏览器，使得图片水平充满浏览器窗口并且居中。替代margin:50 auto;的功能.
2. 将一个图像放在水平方向1/3， 垂直方向2/3处。
   background-repeat:no-repeat
background-position:33% 66%;

并联(设置固定的背景图像)background-attachment

1. scroll：背景图像会随着页面其余部分的滚动而移动（默认值）
2. fixed：当页面的其余部分滚动时，背景图像不会移动。
3. inherit：应该从父元素继承background-attachment属性的设置

妙用：

1. 使原图像不会被文档滚动而滚动，原图像的放置由可视区的大小确定，而不是由包含该图像的元素的大小确定 （使图片能一直保持在屏幕上）
   background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

图像的尺寸background-size

1. length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
2. percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
3. cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（背景图像的某些部分也许无法显示在背景定位区域中。图片比例不变）
4. contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（图片比例不变）

汇总

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background-size

以上属性可以汇总到一个简写属性background，这个属性可以从各个其他背景属性取一个值，而且可以采用任何顺序,如果忽略了某些值，就会自动填入相应属性的默认值

常用

1. 背景图片等比例缩放后居中显示

/* 背景图像将仅显示一次 水平方向居中和垂直方向居中*/
background: url(./img/你的图片.png) no-repeat center;
background-size: contain;

或

/* 背景图像将仅显示一次 水平方向居中和垂直方向居中*/
background: url(./img/你的图片.png) no-repeat center;
/*或者，水平铺满，垂直auto*/
 background-size: 100%;

2. 背景图片拉伸铺满（图片会扭曲）

background: url(./img/你的图片.png);
background-size: 100% 100%;