css如何控制图片位置

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

 我来答

6个回答

#热议# 为什么有人显老，有人显年轻？

惠企百科
2022-12-01 · 百度认证:北京惠企网络技术有限公司官方账号

惠企百科

惠企百科网是一家科普类综合网站，关注热门中文知识,集聚互联网精华中文知识,本着自由开放、分享价值的基本原则,向广大网友提供专业的中文知识平台。

向TA提问

关注

展开全部

1、首先我们需要插入一张图片，并且图片只出现一次，并设计图片出现的位置在左上角，可以按照如下代码来完成：

<html>

<head>

<title>图片位置设置</title>

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>

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>

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>

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>

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>

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>

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:150px 150px;

}

</style>

</head>

<body>

</body>

</html>

从下图可以看到我们的执行结果，背景图片出现的位置是150px,150px这个点作为左上角的起始点。

已赞过 已踩过<

评论收起

北京勤哲软件技术

广告2024-11-15

勤哲Excel服务器2024学习和下载。用Excel自动生成cad图管理软件及手机app.软博会金奖产品，适合于各行各业的管理人员使用。

www.qinzhe.com

很多游戏

高粉答主

2019-11-15 · 游戏精通者，攻略技能点满

很多游戏

采纳数：91 获赞数：386912

向TA提问私信TA

关注

展开全部

1、首先我们需要插入一张图片，并且图片只出现一次，并设计图片出现的位置在左上角，可以按照如下代码来完成：

<html>

<head>

<title>图片位置设置</title>

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>

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>

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:top right;

}

</style>

</head>

<body>

</body>

</html>

可以看到如下图所示的执行效果图，图片出现的位置在上方的右边了。

<html>

<head>

<title>图片位置设置</title>

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>

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>

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:bottom;

}

</style>

</head>

<body>

</body>

</html>

通过如下图可以看到具体的执行效果，只用一个bottom就能设置图片出现在最下方这个位置上了。

<html>

<head>

<title>图片位置设置</title>

body{

background-image:url("2.jpg");

background-attachment:scorll;

background-repeat:no-repeat;

background-position:150px 150px;

}

</style>

</head>

<body>

</body>

</html>

从下图可以看到我们的执行结果，背景图片出现的位置是150px,150px这个点作为左上角的起始点。

本回答被网友采纳

已赞过 已踩过<

评论收起

百度网友a91dbe362
推荐于2017-09-18 · TA获得超过1.1万个赞

知道大有可为答主

回答量：4087

采纳率：0%

帮助的人：4278万

我也去答题访问个人页

关注

展开全部

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

假设你所说的背景图是在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相对定位*/
}

.abc{position:absolute;left:20px;top:5px;/*让more图片这个链接绝对定位，left和top的数值你自己调一下就能对齐到背景图的合适位置了*/}


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

贪恋迩的香吻
2015-05-19 · TA获得超过2.1万个赞

知道大有可为答主

回答量：3485

采纳率：79%

帮助的人：410万

我也去答题访问个人页

关注

展开全部

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相对定位*/
}

.abc{position:absolute;left:20px;top:5px;/*让more图片这个链接绝对定位，left和top的数值你自己调一下就能对齐到背景图的合适位置了*/}

已赞过 已踩过<

评论收起

百度网友6b46965
推荐于2017-09-19 · TA获得超过5583个赞

知道小有建树答主

回答量：957

采纳率：84%

帮助的人：417万

我也去答题访问个人页

关注

展开全部

<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">
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
</style>
想法是好的，但所用的浏览器支持吗？我想IE或者FF一定会当作没看见吧。也许，曾经设计论坛风格时，是可以实现的啊？如果只是上面的代码的话，那是不可控制图片的，只是控制BODY的大小。当然，这里也是控制不了的。如果是其它的ID标记，是可以控制记标记的范围大小，当然也就不是图像的大小了。