首页 > 代码库 > css基础系列教程:背景属性
css基础系列教程:背景属性
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>
<style type="text/css">
/*这是CSS的备注形式。为了以后阅读方便，如果颜色值一样可以简写为#ccc; */
h1 {background-color:#cccccc; }
h2{background-color:red;}
/*是默认效果，可以不写*/
h3{background-color:trasparent;}
</style>
</head>
<body>
<h1>十六进制示例</h1>
<h2>颜色名称</h2>
<h3>透明背景</h3>
</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>
<style type="text/css">
div{background-image:url(3_01.gif); }
</style>
</head>
<body>
<div>内容1</div>
</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>
<style type="text/css">
div{background-image:url(3_01.gif); width:500px;height:500px;border:2pxsolid #f00;}
</style>
</head>
<body>
<div>内容1</div>
</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>
<style type="text/css">
div
{
width:400px;height:400px;border:2px solid#f00;
background-image:url(css8bj.jpg);
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
<body>
<div>
<p>在这个示例的图片宽是208px，高是120px，在我们不平铺的时候，默认是DIV的左上角，如果按我们样式所设置则在顶部右上角，当然你也可以使用百分比和PX值进行</p>
</div>
</body>
</body>
</html>
在上述代码情况下如果我们想让我们上边的背景图片不显示第一行与第一列怎么办呢。我们还可以为背景位置设置负的值
<html>
<head>
<style type="text/css">
div
{
width:400px;height:400px;border:2px solid#f00;
background-image:url(css8bj.jpg);
background-repeat:no-repeat;
background-position:-73px -38px;
}
</style>
</head>
<body>
<body>
<div>
<p>在这个示例的图片宽是208px，高是120px，在我们不平铺的时候，默认是DIV的左上角，73px -38px，我们使用负的值是为了向左偏移以及向上偏移</p>
</div>
</body>
</body>
</html>
而且我们的背景图片也可以结合颜色在一块来用，当背景图片没有显示的时候就用颜色进行填充。我们现在看一个示例。
<html>
<head>
<style type="text/css">
body
{
background-image:url(divcss801.gif);
background-repeat:repeat-x;
background-position:0 0
background-color:#055269;
}
</style>
</head>
<body>
<body>
<div>
<p>我们网页背景沿X轴平铺的时候，如果没有占满其它地方可以用背景颜色代替</p>
</div>
</body>
</body>
</html>
这个地方的背景颜色取值是根据背景图片决定的。大家可以用PS看一下这个背景图片最下方的颜色是不是我们现在使用的。
我们学了之前这么多内容，其实背景还可以简写，形式如下：
Background:background-color颜色 |background-image背景图片路径 | background-repeat 是否平铺 | background-position 位置|background-attachment 是否滚动
强调一下：在使用简写的时候必须是Background，如果是用bakcground-image:只能写图片位置，不能再加其它。那么我看一个示例
<html>
<head>
<style type="text/css">
body
{
background:#055269 url(divcss801.gif)repeat-x 0 0;
}
</style>
</head>
<body>
<body>
<div>
<p>我们的背景沿X轴平铺的时候，如果没有占满其它地方可以用背景颜色代替</p>
</div>
</body>
</body>
</html>
本文出自 “石景山电脑培训” 博客，请务必保留此出处http://jiefei.blog.51cto.com/6994042/1557754
css基础系列教程:背景属性