css如何控制图片位置

html-css023

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、首先找到一款html编辑器，如：打开DW软件，ctrl+n创建一个html文件，如题：使图片靠右，与文字不在同一行，找到一张图片，并且设置图片居右，文字另起一行写入：如下

详解：图片img设置的float:right靠右浮动，p标签在其下面，所以要加个清楚浮动的效果；样式中定义了clear也可以写成：<div class="clear"></div>效果是一样的；

图片靠右浮动，文字另起一行展示主要css属性用于：clear:both清除左右浮动，both换成left:清除左浮动，right是清除右浮动；不添加就会在底层展示；看着是在同一行实则不然，他们在两个层里展示的；

2、页面展示效果：如下

用一个div作为主框架，嵌套图片和文字内容两个div，同时使用浮动功能。

图片向左浮动，文字内容向右浮动，这就形成了两栏。

右边的文字内容又分为两个div，不需要浮动，它会自动上下排列的。

代码如下：

<div id="container">

<div id="photo"><img src="图片地址" /></div>

<div id="content">

<div id="text">文字介绍</div>

<div id="news">新闻内容</div>

</div>

</div>

CSS：

#container {width: 100%}

#photo {float: leftwidth: 40%}

#content {float: rightwidth: 60%}。