CSS-BACKGROUND属性

CSS-BACKGROUND属性

background-color:设置背景颜色

background-image 设置背景图片

background-repeat 背景重复

background-position 背景定位

background-attachment 背景附着

background-color:设置背景颜色

加载范围：默认加载到边框及以内部分。后期如果加载图片不重复，加载从border以内开始

属性值：url（图片路径）

background-repeat：设置背景重复

常用属性值：no-repeat，repeat，repeat-x（水平重复），repeat-y（垂直重复）

background-position：背景定位

默认是在左上角进行加载。

属性值有俩，值之间用空格分隔。第一个属性值表示水平位置，第二个表示垂直位置。

background-attach：背景附着

作用是设置背景图片是否要随着页面或盒子的滚动而滚动

属性值有两个，scoll（滚动的）和fixed（固定的，不会随着背景图的滚动而滚动）

注意一旦设置了fixed之后，他的参考值和参考点会变成整个浏览器，而不是box自身了

background综合写法：

对五个单一的属性值进行合写

属性值：可以有1-5属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能点到顺序。五个属性值之间可以互换位置

background: url(1.jpg) no-repeat center top fixed red;

注意事项一：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

背景图替换插入图

H1是权重最高的标签，可以帮助seo搜索排名的提高,但是有一个问题是设置logo图片时，如果使用插入图就不能书写关键字。为了解决这个问题，可以将插入图替换成搜索关键字，然后用css添加背景图给H1标签添加一个背景logo。

文字隐藏方法

想要隐藏a中的文字，可以设置给标签一个 Text-Indent属性。属性值为负的很大的值，文字会走到盒子外部，直接在设置溢出隐藏属性，将溢出文字隐藏。

css精灵图

一种处理网页背景png图像的方式

可以用一些在线的精灵图处理工具

使用精灵图：

先在fw里进行切图，；量取好合适的盒子大小

设置body里的标签，P并且设置css的P属性，background该切图

css3新增背景属性：

支持半透明写法，颜色值增加了一种rgba模式。

rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示不透明，0.5表示半透明

background-color: rgba(120,25,4,0.2);