使用HTML/CSS定位图像
我正在尝试使用HTML和CSS将附加的图标定位到弹药室的背景图像中。我设法做到的是，通过将每个图标完全定位为具有顶部和左侧属性，实现了预期效果，如下所示：使用HTML/CSS定位图像,html,css,Html,Css,我正在尝试使用HTML和CSS将附加的图标定位到弹药室的背景图像中。我设法做到的是，通过将每个图标完全定位为具有顶部和左侧属性，实现了预期效果，如下所示： <html> <head> <style> img { position: absolute; } #facebook { left: 103px; top: 28px;
<html>
<head>
<style>
img {
position: absolute;
}
#facebook {
left: 103px;
top: 28px;
}
#twitter {
left: 37px;
top: 142px;
}
#rss {
left: 168px;
top: 142px;
}
</style>
</head>
<body>
<img id="chamber" src="chamber.png">
<img id="facebook" src="facebook.png">
<img id="twitter" src="twitter.png">
<img id="rss" src="rss.png">
</body>
img{
位置：绝对位置；
}
#脸谱网{
左：103px；
顶部：28px；
}
#推特{
左：37像素；
顶部：142px；
}
#rss{
左：168px；
顶部：142px；
}
这是以这种方式定位元素的正确方法吗？根据屏幕/浏览器的分辨率，是否会产生副作用？感谢您的帮助。将这些图像包装在一个div中，并将相对位置应用于该div，然后使用图像的绝对位置：
<div class="circle">
<img id="chamber" src="chamber.png">
<img id="facebook" src="facebook.png">
<img id="twitter" src="twitter.png">
<img id="rss" src="rss.png">
</div>
.circle{
position: relative;
background: url(circle-image.jpg) no-repeat;
width: 400px; /*layout as yours*/
height: 400px; /*layout as yours*/
}
#chamber{ /* do for all other images*/
position: absolute; /* now it is positioned in relation with circle div*/
top: 30px; /*layout as yours*/
left: 30px; /*layout as yours*/
}
.圆圈{
位置：相对位置；
背景：url（circle image.jpg）不重复；
宽度：400px；/*布局与您的相同*/
高度：400px；/*布局与您的相同*/
}
#腔室{/*do适用于所有其他图像*/
位置：绝对；/*现在它是相对于圆div定位的*/
顶部：30px；/*布局与您的相同*/
左：30px；/*布局与您的相同*/
}
<body>
<div id="ammo">
<img id="chamber" src="chamber.png">
<img id="facebook" src="facebook.png">
<img id="twitter" src="twitter.png">
<img id="rss" src="rss.png">
</div>
</body>
#弹药{
位置：相对位置；
宽度：；
身高：；
}
img{
位置：绝对位置；
}
#密室{
左：0px；
顶部：0px；
}
#脸谱网{
左：103px；
顶部：28px；
}
#推特{
左：37像素；
顶部：142px；
}
#rss{
左：168px；
顶部：142px；
}
最好将相对位置的元素包装起来，这样当您向
主体添加更多元素时，它就不会断裂
绝对定位元素相对于最近的定位的父元素进行定位<代码>定位
可以是默认的静态
定位（即固定/绝对/相对）以外的任何定位。或者，如果找不到任何元素，它将相对于主体
进行定位
现在，在您的代码中，绝对
元素将相对于主体
定位。如果您在图像之前添加更多的代码，比如h1
，事情就会重叠。如果您使用相对定位元素来包装所有img
，即使您在开始时添加了更多类似h1
的元素，它也将遵循静态/顺序顺序，并避免元素重叠
花点时间阅读本文：我认为最好在示例中使用背景位置
属性
或者，另一种解决方案是CSS精灵
HTML:
<div class="main-wrapper ">
<div class="inside-img-facebook "></div>
</div>
看看这是怎么做到的
这肯定会对你有帮助 我想说，你可以用chamber.png作为背景将3个图标包装在一个div中。并使它们处于相对位置
<style>
.chamber{
width:200px;
height:200px;
position:relative;
background-img:url("chamber.png");
}
#facebook,#twitter,#rss{
/*
relative does not work here
position:relative;
*/
position:absolute;
width:50px;
height:50px;
}
#facebook {
left: 103px;
top: 28px;
}
//position for the icons...
</style>
<div class="chamber">
<img id="facebook" src="facebook.png">
<img id="twitter" src="twitter.png">
<img id="rss" src="rss.png">
</div>
.会议厅{
宽度：200px；
高度：200px；
位置：相对位置；
背景img:url（“chamber.png”）；
}
#facebook、twitter、rss{
/*
亲戚不在这里工作
位置：相对位置；
*/
位置：绝对位置；
宽度：50px；
高度：50px；
}
#脸谱网{
左：103px；
顶部：28px；
}
//图标的位置。。。
然后，无论屏幕分辨率如何变化，腔室的大小都将相同，图标相对于腔室的位置也将相同。如果可能，请提供一个JSIDLE。使用固定像素值将意味着该项目不会响应，但通常，你的问题太宽泛了，答案将是基于观点的…所以这是离题的。如果你想让它动态定位到那个位置？？？事情变得复杂了，你应该做一个div来包装你的图像，这是你的房间图像，它不应该是绝对的，它应该有相对的位置。其他图像应该是绝对定位的。如果我自己做的话，我会把图标放在div背景中。但请详细说明为什么在IMG上有相对位置不好@因为如果你想再添加一个或删除另一个，每个图像都会被移动，因为它们是相对的，而不是绝对的。啊，我明白了。。。相对定位块仍然占据其原始空间，似乎这就是问题所在是的，因此绝对位置更好
.main-wrapper {
width:400px;
height:400px;
background-repeat: no-repeat;
background-position: 94px 20px;
background-image: url('http://i.stack.imgur.com/IMzvX.png');
}
.inside-img-facebook {
width:400px;
height:400px;
background-repeat: no-repeat;
background-position: 10px center;
background: url('http://i.stack.imgur.com/FN3hc.png') no-repeat;
}
<style>
.chamber{
width:200px;
height:200px;
position:relative;
background-img:url("chamber.png");
}
#facebook,#twitter,#rss{
/*
relative does not work here
position:relative;
*/
position:absolute;
width:50px;
height:50px;
}
#facebook {
left: 103px;
top: 28px;
}
//position for the icons...
</style>
<div class="chamber">
<img id="facebook" src="facebook.png">
<img id="twitter" src="twitter.png">
<img id="rss" src="rss.png">
</div>