css基础系列教程:背景属性

浏览数：48 / 时间：2015年06月09日

css基础系列教程:背景属性

作者：www.divcss.com

我们把上一节的作业的答案给大家公布一下：

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的。

使用背景(background)是网页设计制作中一种常用手法，网站中随处可见的导航，整体页面背景都是通过background完成的。

我们先看一下背景的颜色属性（background-color）,我们可以采用的值：十六进制，颜色名称，透明的背景.

现在我们通过一个示例来了解一下

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>divcss8背景颜色示例</title>

/*这是CSS的备注形式。为了以后阅读方便，如果颜色值一样可以简写为#ccc; */

h1 {background-color:#cccccc; }

h2{background-color:red;}

/*是默认效果，可以不写*/

h3{background-color:trasparent;}

</style>

</head>

<body>

<h1>十六进制示例</h1>

</body>

</html> PS：颜色值大家可以通过PS去获取，也可以通过百度搜索获取

在我们网页中不只可以使用背景颜色，还可以使用背景图片属性background-image定义背景图象的路径。但是最好在结合背景图象的重复属性background-repeat定义背景图象的是否重复效果。

最重要的：背景图象只有在一定的区域范围内才能显示，所以在指定背景图象的时候，通常要定义元素的宽高属性；

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>www.divcss.com背景示例</title>

div{background-image:url(3_01.gif); }

</style>

</head>

<body>

</body>

</html>

现在这种情况下。背景图片会铺满整个屏幕。但是不会有高度显示

这个问题就是我刚才所重点提到的背景图象只有在一定的区域范围内才能显示.所以说我们可以给DIV指定一个宽(width)与高(height),为了让大家看的更清楚些。我提供一个边框。

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>www.divcss.com背景示例</title>

div{background-image:url(3_01.gif); width:500px;height:500px;border:2pxsolid #f00;}

</style>

</head>

<body>

</body>

</html>

大家不知道发现没。如果使用我们提供的图片做背景，会出现完全平铺。因为我们的背景图片只有宽184PX，高384PX。这也是默认情况。所以说我们可以通过background-repeat这个属性决定背景图片如何平铺。

background-repeat：是指定元素中背景图象的重复方式。有以下几种取值方式：

Repeat:完全平铺；默认情况下,我们可以忽略不写

no-repeat：在X与Y均不平铺；

repeat-x：X平铺；

repeat-y：Y轴平铺；

大家可以对上述代码做个修改。

background-position：设置背景图片在一定区域内的显示的位置，这个属性需要设置两个值，一个是X水平，一个垂直位置，可以使用%，也可使用具体的数值PX，也可以使用：top left|top center |top right | center left | bottom left这样结合

我们看一个示例：

<html>

<head>

div

{

width:400px;height:400px;border:2px solid#f00;

background-image:url(css8bj.jpg);

background-repeat:no-repeat;

background-position:top right;

}

</style>

</head>