css基础系列教程:背景属性
2014-09-28 08:58
501 查看
我们把上一节的作业的答案给大家公布一下：
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">
<html xmlns="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://www.divcss8.com/csskan.aspx?NewsID=7 本文出自 “读书屋” 博客，请务必保留此出处http://jiefei.blog.51cto.com/6994042/1558904
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">
<html xmlns="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://www.divcss8.com/csskan.aspx?NewsID=7 本文出自 “读书屋” 博客，请务必保留此出处http://jiefei.blog.51cto.com/6994042/1558904
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css基础系列教程:背景属性
- css基础系列教程4:文本属性
- css基础系列教程：CSS基础语法1
- Css3之基础-5 Css 背景、渐变属性
- css基础系列教程：CSS基础语法2
- CSS从基础到熟练学习笔记（三）CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
- CSS教程:背景background属性应用
- css系列教程--简介及基础语法和注意事项
- HTML+CSS基础入门-第十三天（CSS-背景属性）
- 【php基础班】第6天 padding_margin、CSS背景、CSS Sprite、CSS表格属性、CSS浮动与清除
- css基础学习----背景属性
- （一）CSS书写基础、背景、文字属性
- CSS教程:背景background属性应用
- CSS应用基础教程(4)颜色背景
- CSS背景属性
- CSS基础应用学习系列(3)——图像的CSS阴影效果
- CodeSmith使用基础教程 四 — 控制台与属性编辑器
- Ajax基础教程--- 2.2 方法和属性
- CSS基础应用学习系列(4)――用CSS对列表应用样式
- 实用CSS教程：从基础开始（一）