css背景

 最近写css渲染页面时，遇到了一些问题，发现之前学的css忘的差不多了，现在小总结一下，关于background:背景相关知识

 

background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

CSS background-attachment(这个属性真忘了)

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

 

实例

指定应该固定背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

background-attachment: fixed;固定图片不会随着滚动条而滑动

background-size,与background-postion这两属性经常要使用的到，也忘记的差不多了

.

search .right {

    float: left;

    width: 24px;

    height: 28px;

    background-image: url(../img/sou.png);

    background-repeat: no-repeat;

    background-size: cover;        //背景图片适应覆盖盒子大小

    background-position: top left; // 设置背景图像的开始位置。

    

}

 

如果全部用background-image:  background-repeat ....   这样代码会有些冗余，可以使用简写属性

使用简写属性在一条声明中设置背景属性：

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您能够使用简写属性 background：

例如: 

body
{
  background: #ffffff url("tree.png") no-repeat right top;
}

ps:不需要,隔开

在使用简写属性时，属性值的顺序为：

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

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。