CSS 中关于background 属性功能

background 是 css中的核心属性，我们对他应该充分了解。

background-image   定义背景图像  这个属性是我们用的最多的属性 

设置背景图像有两个方式

background: url("img/01.jpg") ; 或者 background-image: url("img/01.jpg");

background-color     定义背景颜色 (三个属性）

属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

1.currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，这是css3中新加的关键字 比如 ：border: 1px solid currentColor 是指当前标签所继承文字的颜色

http://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/   这个是currentColor 的具体描述 。

2.  transparent   尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

3. inherit是继承,继承块中的颜色 （这个具体的用法我也不清楚，基本上没有用过。）

background-origin    指定背景的显示区域

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，

1. padding-box    背景图像相对于内边距框来定位。

.box {
300px;
height: 400px;
background: url("im/1.jpg") no-repeat;         
background-origin: border-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}

2. border－box    背景图相对于边框盒来定位。

.box {
300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: border-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;

}

3. content－box   背景图像相对于内容框来定位。

.box {
300px;
height: 400px;
background: url("im/1.jpg") no-repeat;
background-origin: content-box;
padding: 50px;
border: 50px solid orange;
margin: auto;
margin-top: 100px;
}

background-clip       指定背景的裁剪区域

该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

如果它的值为border,则背景在元素的边框、补白和内容区域都会显示；如果值为padding,则背景只会在补白和内容区域显示；如果值为content，则背景只会在内容区域显示。

1.padding-box   从padding区域向外剪裁背景

.box {
300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: padding-box;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}

2.border-box   从border区域向外剪裁背景

.box {
300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: border-box;;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}

3.content-box   从content区域向外剪裁背景

.box {
300px;
height: 300px;
background: url("im/1.jpg") no-repeat;
background-clip: content-box;
background-origin: padding-box;
padding: 50px;
border: 50px dashed orange;
margin: auto;
margin-top: 100px;
}

background-repeat   设置背景图片是否及其如何重复铺排

1.   repeat: 平铺整个页面,左右与上下

.box {
600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

2.   repeat-x: 在x轴上平铺,左右

.box {
600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat-x;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

3.   repeat-y: 在y轴上平铺,上下

.box {
600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:repeat-y;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

4.   no-repeat: 图片不重复

.box {
600px;
height: 600px;
background: url("im/1.jpg");
background-repeat:no-repeat;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

 

background-size       定义背景图片的大小

1.  初始值 auto 

.box {
600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size: auto;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

2.  cover  保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景区域。

.box {
600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size: cover;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

3.  contain  保持图像 本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域。

.box {
600px;
height: 600px;
background: url("im/1.jpg")no-repeat;
background-size:contain;
border: 10px dashed orange;
margin: auto;
margin-top: 100px;
}

 

background-position  设置背景图片的位置

1.  最主要使用在 一张png 上有多个logo 或者 ico  这个时候就用到background-position了

2.  background-position: 15px 20px;(指将图片向右移15px,向下移20px;)  就是以图片的左上角顶点为原点，往下和右都为正，反之为负，

3. background-position : centen  centen   靠右居中。

background-attachment  定义背景图像的显示方式

1.   scroll: 随着页面的滚动轴背景图片将移动

背景图是相对于元素自身固定，内容动时背景图也动,附加到元素的border

2.   fixed: 随着页面的滚动轴背景图片不会移动

背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。

3.  local  :   则背景会随内容的滚动而滚动。

因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。

div{
200px;
height: 350px;
border: 1px solid red;
background-image: url("im/1.jpg");
background-repeat: no-repeat;
background-attachment: local;
overflow: scroll;
line-height: 1.5;
}

</style>
</head>
<body>
<div>
1内容超出会出现滚动条
2内容超出会出现滚动条
3内容超出会出现滚动条
4内容超出会出现滚动条
5内容超出会出现滚动条
6内容超出会出现滚动条
7内容超出会出现滚动条
8内容超出会出现滚动条
9内容超出会出现滚动条
10内容超出会出现滚动条
11内容超出会出现滚动条
12内容超出会出现滚动条
13内容超出会出现滚动条
14内容超出会出现滚动条
15内容超出会出现滚动条
16内容超出会出现滚动条
17内容超出会出现滚动条
18内容超出会出现滚动条
19内容超出会出现滚动条
20内容超出会出现滚动条
</div>
</body>