1、首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。

3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

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这个点作为左上角的起始点。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/6408653.html