Background其他属性

CSS 背景属性（Backgound)

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

背景属性（background-position）

作用

设置背景图像的起始位置

格式

background-position： 水平方向 垂直方向；

取值

1.具体的方位名词

水平方向：left center right

垂直方向：top center bottom

2.具体的像素。

100px 200px(距离左边界100像素，距离上边界200px)

-100px -200px(超出左边界100像素，超出上边界200px)

这里就需要知道其实就是我们数学中的xy轴，不过是y轴的正负方向反转。向下为y轴正方向，x轴正方向不变。

注意点

1.同一个标签可以同时设置背景颜色和背景图片如果，如果同时存在，图片部分会覆盖背景颜色。

2.一定要写具体单位px，可以接受负数.

关联方式（background-attachment）

什么是背景和滚动条关联方式

默认情况下我们设置背景图片，如果界面过长，旁边会有滚动条，背景图片会随着页面滚动而滚动，如果我们不想让其滚动就可以修改图片和滚动条关联方式

取值

scroll 默认值会随着滚动条滚动而滚动

fixed 不会随着滚动条滚动而滚动

背景属性缩写

格式

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

注意点

background缩写时任何一个属性都可以被省略。

插入图片和背景图片的区别

1.背景图片不会占用位置，如果里边有文字只会显示图片上，不会另起一行，插入图片占用位置。

2.背景图片有定位属性，可以随意改变位置，插入图片没有定位属性。

3.插入图片比背景图片语义强，如果想要被搜索引擎找到，就使用插入图片。

background属性快捷键：bg+然后按下table生成如下连写
background: #fff url() 0 0 no-repeat;（0 0是定位）