css基础系列教程背景.pdf

《css基础系列教程背景.pdf》由会员分享，可在线阅读，更多相关《css基础系列教程背景.pdf（5页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、css 基础系列教程基础系列教程:背景属性背景属性 作者： 我们把上一节的作业的答案给大家公布一下：1、h1.p1：表示 h1 标签下的所有 class 为 p1 的选择符；2、#content h1表示 id 为 content 下的所有 h1 标签；3、h1.p1，#content h1 并列关系，对 class 为 p1 的和 ID 为#content 下的 H1 作用同一个效果；4、h1#content h2 表示 h1 下 id 为 content 标签下的 h2 标签，请注意这个地方不是包含没有空格而是紧接着写的。必须是属于 H1 里面 ID 为#content 下包含 H2 的。

2、使用背景背景(background)是网页设计制作中一种常用手法，网站中随处可见的导航，整体页面背景都是通过 background 完成的。我们先看一下背景的颜色属性（background-color）,我们可以采用的值：十六进制，颜色名称，透明的背景.现在我们通过一个示例来了解一下 divcss8 背景颜色示例 /*这是 CSS 的备注形式。为了以后阅读方便，如果颜色值一样可以简写为#ccc;*/h1 background-color:#cccccc;h2background-color:red;/*是默认效果，可以不写*/h3background-color:trasparent;十六进制

3、示例 颜色名称 透明背景 PS：颜色值大家可以通过 PS 去获取，也可以通过百度搜索获取 在我们网页中不只可以使用背景颜色，还可以使用背景图片属性 background-image 定义背景图象的路径。但是最好在结合背景图象的重复属性 background-repeat 定义背景图象的是否重复效果。最重要的：背景图象只有在一定的区域范围内才能显示，所以在指定背景图象的时候，背景图象只有在一定的区域范围内才能显示，所以在指定背景图象的时候，通常要定义元素的宽高属性通常要定义元素的宽高属性； 背景示例 divbackground-image:url(3_01.gif);内容 1 现在这种情况下。背

4、景图片会铺满整个屏幕。但是不会有高度显示 这个问题就是我刚才所重点提到的背景图象只有在一定的区域范围内才能显示背景图象只有在一定的区域范围内才能显示.所以说我所以说我们可以给们可以给 DIV 指定一个宽指定一个宽(width)与高与高(height),为了让大家看的更清楚些。为了让大家看的更清楚些。我提供一个边我提供一个边框。框。 背景示例 divbackground-image:url(3_01.gif);width:500px;height:500px;border:2px solid#f00;内容 1 大家不知道发现没。如果使用我们提供的图片做背景，会出现完全平铺。因为我们的背大家不知道

5、发现没。如果使用我们提供的图片做背景，会出现完全平铺。因为我们的背景图片只有宽景图片只有宽 184PX，高，高 384PX。这也是默认情况。所以说我们可以通过。这也是默认情况。所以说我们可以通过background-repeat这个属性决定背景图片如何平铺。background-repeat：是指定元素中背景图象的重复方式。有以下几种取值方式：Repeat:完全平铺；默认情况下完全平铺；默认情况下,我们可以忽略不写我们可以忽略不写 no-repeat：在：在 X 与与 Y 均不平铺；均不平铺；repeat-x：X 平铺；平铺；repeat-y：Y 轴平铺；轴平铺；大家可以对上述代码做个修改。b

6、ackground-position：设置背景图片在一定区域内的显示的位置，这个属性需要设置两个值，一个是 X 水平，一个垂直位置，可以使用%，也可使用具体的数值 PX，也可以使用：top left|top center|top right|center left|bottom left 这样结合 我们看一个示例：div width:400px;height:400px;border:2px solid#f00;background-image:url(css8bj.jpg);background-repeat:no-repeat;background-position:top right;在

7、这个示例的图片宽是 208px，高是 120px，在我们不平铺的时候，默认是 DIV 的左上角，如果按我们样式所设置则在顶部右上角，当然你也可以使用百分比和 PX 值进行 在上述代码情况下如果我们想让我们上边的背景图片不显示第一行与第一列怎么办呢。我们还可以为背景位置设置负的值 div width:400px;height:400px;border:2px solid#f00;background-image:url(css8bj.jpg);background-repeat:no-repeat;background-position:-73px-38px;在这个示例的图片宽是 208px，高

8、是 120px，在我们不平铺的时候，默认是 DIV 的左上角，73px-38px，我们使用负的值是为了向左偏移以及向上偏移 而且我们的背景图片也可以结合颜色在一块来用，当背景图片没有显示的时候就用颜色进行填充。我们现在看一个示例。body background-image:url(divcss801.gif);background-repeat:repeat-x;background-position:0 0 background-color:#055269;我们网页背景沿 X 轴平铺的时候，如果没有占满其它地方可以用背景颜色代替 这个地方的背景颜色取值是根据背景图片决定的。大家可以用 PS

9、看一下这个背景图片最下方的颜色是不是我们现在使用的。我们学了之前这么多内容，其实背景还可以简写，形式如下：Background:background-color 颜色|background-image 背景图片路径|background-repeat 是否平铺|background-position 位置|background-attachment 是否滚动 强调一下：在使用简写的时候必须是 Background，如果是用 bakcground-image:只能写图片位置，不能再加其它。那么我看一个示例 body background:#055269 url(divcss801.gif)repeat-x 0 0;我们的背景沿 X 轴平铺的时候，如果没有占满其它地方可以用背景颜色代替