css如何控制图片位置

html-css022

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

步骤如下:

1.首先,我们准备一个简单的网页用于测试使用。在记事本中输入以下代码:

然后依次点击“文件”——保存,保存文件名为:index.html,保存类型为所有文件。

2.双击打开保存的index.html文件;

3.1.利用marquee标签右移

针对第一种情况,我们可以利用marquee标签来实现图片循环右移。

修改第一个图像的代码:

4,保存后,在浏览器中打开;

2.利用CSS样式右移

针对第二种情况,可以利用css样式来让图片在原来位置的基础上向右偏移给定值距离。

修改第一张图片代码如下:

style=position:relativeleft:10px表示图像在原有位置的基础上向右移动10PX。

1、首先,您需要创建一个html。

2、同时,您需要创建一个CSS文档。

3、CSS文档的后缀名必须为CSS,比如我们创建一个index.css文档。这一点很重要。

4、引入CSS文档。HTML里就可以移动图片位置,方法很简单。