CSS背景图片的相对位置设置HMTL背景图片设置

我们要设置背景图片出现在网页的位置该如何设计呢？今天我就来讲解使用background-position来设置背景图片出现在网页的相对位置，无论是想要网页图片在正中间还是在其他位置都可以设计。

操作方法

  • 01

    首先我们需要插入一张图片，并且图片只出现一次，并设计图片出现的位置在左上角，可以按照如下代码来完成： <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> 可以看到背景图片出现的位置在浏览器的左上角，这个和默认的设置是一样的。

  • 02

    我们需要让图片出现在上方的正中间该怎么做呢？这里我就用代码来说明问题，具体详细代码如下： <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> 从下图的执行结果可以看到，我们的背景图片出现在了上方的正中间这个位置上了。

  • 03

    在上方的中间和左边都出现了，接下来设置图片出现在上方的右边，具体代码如下所示： <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> 可以看到如下图所示的执行效果图，图片出现的位置在上方的右边了。

  • 04

    如果需要图片出现的位置在正中间该怎么做呢？我们知道设计网页的时候背景图片等等元素一般都是需要放在正中间这个位置上的，这里我就来分析下如何将背景图片放置在正中间这个位置上，具体代码如下： <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> 可以看到如下的执行结果，背景图片出现在了下方的正中间这个位置上了。

  • 05

    我们该如何设置图片出现在背景图片的下方左边这个位置呢？下边用到了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> 可以看到如下图所示的结果，

  • 06

    还可以设置背景图片出现的位置在最下方，可以看到如下代码： <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就能设置图片出现在最下方这个位置上了。

  • 07

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

赞 (0)

相关推荐