css如何控制图片位置

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css如何控制图片位置相关的知识，希望对你有一定的参考价值。

如图，我想让more那个图片 与背景的more位置完全重合
css怎么控制？谢了
别复制一大堆无用的过来。只要代码就好了！

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

 参考技术A

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

 参考技术B 先让你有背景图那个大的容器有相对定位属性，然后再让那张图片有绝对定位属性！

假设你所说的背景图是在id为bj的div上，那么html代码就是：
<div id="bj"></div>

Css代码：
#bj
width:100px;height:100px;/*换成你的实际宽高*/
background:url(你的背景图路径);


现在，Html中再加入一个More的图片后代码如下：
<div id="bj">
<a href="#" class="abc"><img src="more.gif" /></a>
</div>

现在Css代码改成下面的：
#bj
width:100px;height:100px;/*换成你的实际宽高*/
background:url(你的背景图路径);
position:relative;/*让大div相对定位*/


.abcposition:absolute;left:20px;top:5px;/*让more图片这个链接绝对定位，left和top的数值你自己调一下就能对齐到背景图的合适位置了*/本回答被提问者采纳 参考技术C html代码：

<div id="bj"></div>

Css代码：
#bj
width:100px;height:100px;/*换成你的实际宽高*/
background:url(你的背景图路径);


现在，Html中再加入一个More的图片后代码如下：
<div id="bj">
<a href="#" class="abc"><img src="more.gif" /></a>
</div>

现在Css代码改成下面的：
#bj
width:100px;height:100px;/*换成你的实际宽高*/
background:url(你的背景图路径);
position:relative;/*让大div相对定位*/


.abcposition:absolute;left:20px;top:5px;/*让more图片这个链接绝对定位，left和top的数值你自己调一下就能对齐到背景图的合适位置了*/ 参考技术D <div style="position:relative; width:80%; margin:0px auto;height:50px;background:url(kimg_02.gif) center no-repeat;">
</div>

图片作为背景
图片的大小要以宽屏为基准
(1)、背景图片的导入：
当然大家最熟悉的当然是background与background-image了。
为网页设计背景图片的代码是：
body background:url("d:\images\04.jpg")
或者
body background-image:url("d:\images\04.jpg")
这样的话，我们就能将想要作背景的图片导进网页里了。

(2)、背景图片的显示方式：
当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，
它是取值：
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
而代码，我想只要懂一点CSS的都知道，如下：
body background:url("d:\images\04.jpg");background-repeat:no-repeat
这样的话，它就是以原图像大小显示了。

(3)、背景图片的大小控制：
不过问题是，倘若图片过大了，又怎么办呢？对于一个好网页来说，最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用PS或者FireWorks处理一下。不过既然我提到了，我们也不防用CSS来实现图片大小的控制。
我想很多人会自然而然的用上如下代码：
<style type="text/css">
bodybackground-image:url("d:\images\04.jpg");width:350px;height:350px;
</style>
想法是好的，但所用的浏览器支持吗？我想IE或者FF一定会当作没看见吧。也许，曾经设计论坛风格时，是可以实现的啊？如果只是上面的代码的话，那是不可控制图片的，只是控制BODY的大小。当然，这里也是控制不了的。如果是其它的ID标记，是可以控制记标记的范围大小，当然也就不是图像的大小了。

如何用css动态控制footer的位置

比如我要在每个页面下加一个footer，内容就是"copyright...."之类，做在masterpage里面。
我不知道的就是如何动态控制footer的位置，比如上面的内容有1000px，就显示在top: 1050px处，800px就显示在top: 850px处，请问怎么做？

用css动态控制footer的位置，我们可以去换个思路，只要给内容区域的高度有变化，我们将footer公共出来给各个文件调用，然后给每个页面的content区域一个不定长的高度，就解决了，如height：auto；这里通过代码来理解：
<html>
<head>
<style>
.headr
width:900px;
height:30px;
background:#f00 //设置颜色为红色


.content
width:900px;
height:auto; //给content的高度为auto，这样我们在每个页面中foote的位置就是变化的。
background:#0f0 //设置颜色为绿色


.footer
width:900px;
height:200px;
background:#000


</head>
<body>
<div class="headr" > //页头
</div>

<div class="content" > //页面
</div>
<div class="footer" > //页尾
</div>
</body>
</html> 参考技术A 你是放在最下面那就很好办啊，只要放在每个页面的最下面就可以了。你可以这样写css：
.footer
width:1000px; /*这只是举个例子，可以自己设定。
height:200px;


……
<div class="footer">footer内容</div> 参考技术B JS可以做到``
/*前提是FOOTER在main的下方而且上面的内容全部在一个main里面这样就可以了*/
<script>
var main=document.getElementById("main").scrollHeight;/*获取上面main的高度*/
var loc = document.getElementById('footer');
loc.style.top = main+100+'px';/*100是footer的高度好像可以不加.这个我也没试``你试试看行不行*/
</script>

答案补充 还有footer的样式position:absolute; 参考技术C 设置margin-top :50px; 参考技术D foot的margin_top:50px

以上是关于css如何控制图片位置的主要内容，如果未能解决你的问题，请参考以下文章

div+css如何控制图片在电脑屏幕上的比例及位置

css 怎么控制弹出层位置,跪求

html5 如何控制table中文字的位置

wpf中如何控制图片的位置

怎样用css控制图片自适应大小？

怎样用css控制图片自适应大小？