CSS背景图片的相对位置设置HMTL背景图片设置
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>可以看到背景图片出现的位置在浏览器的左上角，这个和默认的设置是一样的。
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>可以看到如下图所示的执行效果图，图片出现的位置在上方的右边了。
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>可以看到如下图所示的结果，
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这个点作为左上角的起始点。
