CSS添加背景图片

css代码添加背景图片：

1．背景颜色：background-color

语法：{background-color:数值}

注意：在html当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。

表格背影颜色：style="background-color:red"

2．背景图片：background-image

语法：{background-image: url(url)|none}

3．背景重复：background-repeat

语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。

说明：参数取值范围：

·inherit 继承

·no-repeat 不重复平铺背景图片

·repeat-x 使图片只在水平方向上平铺

·repeat-y 使图片只在垂直方向上平铺

注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4．背景固定：background-attachment

语法：{background-attachment:fixed|scroll}

·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动

·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动

注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。

5．背景定位：background-position

语法：{background-position:数值|top|bottom|left|right|center}

作用：背景定位用于控制背景图片在网页中显示的位置。

·带长度单位的数字参数

·top：相对前景对象顶对齐

·right：相对前景对象右对齐

·center：相对前景对象中心对齐

·比例关系

关键字解释如下:

top left = left top = 0% 0%

top = top center = center top = 50% 0%

right top = top right = 100% 0%

left = left center = center left = 0% 50%

center = center center = 50% 50%

right = right center = center right = 100% 50%

bottom left = left bottom = 0% 100%

bottom = bottom center = center bottom = 50% 100%

bottom right = right bottom = 100% 100%

注意：参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。

6. 背景样式：background

语法：{background:背景颜色|背景图象|背景重复|背景附件|背景位置}

作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明。

扩展资料：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

参考资料来源：百度百科：css

我们在研究其他的网站的样式的时候经常会发现一种情况 就是在很多background属性里都调用同一张图片 来满足网页各个部分的使用 打开这种图片看一下 会发现这张图片上包含了很多小图片 比如

又如

这些小图片就是整图分割后的各个部分 把各个部分放在一张图片上 而不是是分别存储成单独的图片 其目的我们都知道 就是减少请求次数 节省时间和带宽

那么怎么来实现一张图片在不同的地方只显示其中的一部分呢 这就用到了我们今天要说的背景图片的定位问题 这个问题相信很多人都郁闷过 也经常有朋友问我 所以今天就系统的说一下

我们知道在用图片作为背景的时候 css要这样写 以div容器举例子 也可以是body td p等的背景 道理一样

div{ background:#FFF url(image) no repeat fixed x y}

这里的background的属性值依次为

#FFF 背景色 （颜色值 背景图片没有覆盖的地方 或者没有背景图片时表现的背景色）

image 背景图片 （这里是图片的地址）

no repeat 是否重复 （图片小于容器的大小时 默认会重复排列图片以填满容器 no repeat表示不重复 只有这个时候后面的定位坐标才有用 ）

fixed 背景是否随容器滚动 （有两个可选值 scroll滚动 fixed不滚动 默认是scroll）

x y 背景图像的定位 （注意 只有在no repeat下定位才有意义 这个就是今天要讲的重点）

背景图像定位中我们要明确的几点

两个值前面一个是横向的定位 我们称为x轴方向定位 后面一个值是纵向的定位 我们称为y轴方向定位 如果只有一个值 那默认的就是x轴方向 这时y轴方向就默认的是上下居中对齐 也就是center

坐标轴的原点就是对应容器的左顶点

这个坐标的y轴箭头朝下 也就是右下方（容器内部）x y的值才都为正

x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值

x y的值可以用百分比或者px来表示

x y也可以用 left right top bottom center 这五个对齐方式来表示 但注意 用 left right top bottom center 来表示的时候 应用的是对齐规则 而不是坐标规则 x为left是表示图片的左边和容器的左边对齐 为right的时候表示图片的右边和容器的右边对其 y为top的时候表示图片的顶部和容器的顶部对齐 为bottom时表示图片的底部和容器的底部对齐 x y等于center的时候表示居中对齐

x y用百分比或者px表示的时候 其值可以为负数 我们应用坐标规则就很容易理解负数表示的意义 x为负数时候表示图片左顶点在容器左顶点的左侧 y为负数时表示图片的左顶点在容器的左定点的上方 也就是向左和向上超出容器的范围

下面我用几个图示来说明一下几种情况 蓝色块表示图片 虚线框表示容器（可以div td 或者直接就是body） 注意只有背景图片在容器内我们才能看见 我用白色表示可见部分 而且超出容器范围的是看不见的 我用灰色表示 容器的左顶点的坐标就是（ ）

第一张 背景图片和容的左上对齐 px px 也可以写成left top

第二张 背景图在容器中间 顶点坐标为正值

第三张 背景图部分在容器左上 顶点坐标为负值

到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片 返回去我们看一下开始的时候介绍的两个图片 我们就是可以用 背景定位和容器内才可见这两个性质来随意的调用显示整张图片的某一部分

但是我们为了调用方便 在排列这些小图片的时候要讲究一点规则 比如 小图之间的距离通常是调用小图的容器的大小 或者距离更大一点 这样就可以避免在容器内显示出我们不愿意显示的图片！

补充一点 如果定位用的是百分比话 算法比较特殊 我举个例子

background:#FFF url(image) no repeat fixed % %

这个时候图片应该在容器的什么位置呢 算法公式如下

图片左顶点距容器左顶点的坐标位置为

x （容器的宽度 图片的宽度）x %

y （容器的高度 图片的高度）x（ %）

得到的结果应用坐标法则 差值如果为负数 百分比为正那么运算结果是负值 如果差值为负数 百分比也为负数 那么运算结果就是正数 总而言之就是这里的运算符合运算法则 把运算的结果带入坐标法则就能得到图片的位置

比如 容器是width px height px 而图片是width px height px

我们用上面的样式 可以得到图片位置为

x ( px px)* %

lishixinzhi/Article/program/net/201311/13145

1、首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。

3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

---