css如何控制图片位置

html-css012

css如何控制图片位置,第1张

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

用Css设置图片的位置的话:

1.通过position的绝对定位,然后在通过left和top就可以设置你的图片位置了;代码如下

<div style='position:absolutleft:0pxtop:0px'>

<img src='图片地址'>

</div>

2.通过div+css的布局来实现给定一个包裹图片的div默认位置就行,代码如下

<div>

<div style='flaot:leftwidth:330pxheight:200px'>

<p>我是左边的</p>

</div>

<div style='flaot:leftwidth:330pxheight:200px'>

<img src='图片地址'>

</div>

</div>