CSS
的使用方式有三种：内联
<p style=""></p>
；内部样式，在
head
加入
<style></style>
定义
css
，
body
中引用；外部样式，
css
放在一个外部文件中，
head
中用
<link src="">
加载，
body
中引用和内部样式使用方法相同。
再来点基础的，
css
定义有三种：
直接标签定义如，
p{
具体风格代码
}
效果范围是
body
中所有的
p
标签；根据
ID
号定义，
#p1{
具体风格代码
}
效果范围是
body
中
id="p1"
的标
签；自定义，
.p1{
具体风格代码
}
body
中标签以
class="p1"
进行引用；
一、
CSS
的语法是比较灵活的，比如可以同时定义两个
css
名使用同一种风格，中间以逗
号分隔，如：
.
.p1
，
.p2{
具体风格代码
}
或
.p1
，
#p2,p{
具体风格代码
}
，意思为，自定义的
p1
风格，
id
号为
p2
的风格，
<p>
标签的风格。
二、
接上，也可以
.p1
，
.p2{
具体风格代码
}
.p2{
具体风格代码
}
好处是把自定义
p1
和
p2
相同的部分放在
.p1
，
.p2{
具体风格代码
}
不同部
分
.p2
再定义。
三、
前面自定义好的风格，在引用时
class="
自定义风格
"
，也给了我们充分的灵活，可以
引用多个自定义风格，以空格间隔，如：
.p1{
具体风格代码
}
.p2{
具体风格代码
}
引用时
<p class="p1 p2">
一般用position属性来定义位置。relative相对位置；
absolute绝对位置；
fixed屏幕位置；
通过left、top、bottom、right设置。
1、首先我们需要插入一张图片，并且图片只出现一次，并设计图片出现的位置在左上角，可以按照如下代码来完成：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:top left
}
</style>
</head>
<body>
</body>
</html>
可以看到背景图片出现的位置在浏览器的左上角，这个和默认的设置是一样的。
2、我们需要让图片出现在上方的正中间，这里我就用代码来说明问题，具体详细代码如下：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:top center
}
</style>
</head>
<body>
</body>
</html>
从下图的执行结果可以看到，我们的背景图片出现在了上方的正中间这个位置上了。
3、在上方的中间和左边都出现了，接下来设置图片出现在上方的右边，具体代码如下所示：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:top right
}
</style>
</head>
<body>
</body>
</html>
可以看到如下图所示的执行效果图，图片出现的位置在上方的右边了。
4、如果需要图片出现的位置在正中间，我们知道设计网页的时候背景图片等等元素一般都是需要放在正中间这个位置上的，这里我就来分析下如何将背景图片放置在正中间这个位置上，具体代码如下：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:center center
}
</style>
</head>
<body>
</body>
</html>
可以看到如下的执行结果，背景图片出现在了下方的正中间这个位置上了。
5、设置图片出现在背景图片的下方左边这个位置，下边用到了bottom这个属性值来设置的，具体代码如下：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:bottom left
}
</style>
</head>
<body>
</body>
</html>
可以看到如下图所示的结果，
6、还可以设置背景图片出现的位置在最下方，可以看到如下代码：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:bottom
}
</style>
</head>
<body>
</body>
</html>
通过如下图可以看到具体的执行效果，只用一个bottom就能设置图片出现在最下方这个位置上了。
7、用background-position设置图片的位置除了使用相对位置还能使用绝对位置来设置，可以设置像素值来确定背景图片左上角的坐标点来确定，具体代码如下：
<html>
<head>
<title>图片位置设置</title>
<style type="text/css">
body{
background-image:url("2.jpg")
background-attachment:scorll
background-repeat:no-repeat
background-position:150px 150px
}
</style>
</head>
<body>
</body>
</html>
从下图可以看到我们的执行结果，背景图片出现的位置是150px,150px这个点作为左上角的起始点。
