Question

icons in position in the chamber

empty chamber

icon1

icon2

icon3

我试图使用HTML和CSS将附加的图标放置在弹药室的背景图像中。我设法做的是通过使用top和left属性绝对定位每个图标来实现所需的效果，如下所示：

<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>

这是以这种方式定位元素的正确方法吗？是否会根据屏幕/浏览器的分辨率产生副作用？谢谢你的帮助。

Answer 1

将这些图像包裹在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*/
}

使用firebug或任何开发人员工具来定位元素。

Answer 2

<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>

    #ammo {
        position: relative;
        width: <widthofammo>;
        height:<heightofammo>;
    }
    img {
        position: absolute;
    }

    #chamber {
        left: 0px;
        top: 0px;
    }
    #facebook {
        left: 103px;
        top: 28px;
    }

    #twitter {
        left: 37px;
        top: 142px;
    }

    #rss {
        left: 168px;
        top: 142px;
    }

最好包装一个相对定位的元素，这样当你向body添加更多元素时它就不会中断。

绝对定位元素相对于最近的positioned父元素定位。 positioned可以是除默认static定位之外的任何定位（即固定/绝对/相对）。或者，如果找不到任何元素，它将相对于body定位。

现在，您的代码absolute元素将相对于body定位。如果您在图像之前添加更多代码，例如h1，则事情将重叠。如果使用相对定位元素来包装所有img，即使您在开头添加了更多元素（如h1），它也会遵循静态/顺序排序并避免重叠元素。

花点时间阅读这篇文章：http://alistapart.com/article/css-positioning-101

Answer 3

我认为最好在样本中使用background-position属性

或者，另一个解决方案是CSS Sprites。

HTML：

<div class="main-wrapper ">
    <div class="inside-img-facebook "></div>
</div>

CSS：

.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;
}

看看如何完成Fiddle is here!

它一定会帮到你！

Answer 4

我会说你可以将一个div中的3个图标包含在chamber.png的背景中。并使他们的位置：相对

<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>

然后无论屏幕分辨率如何变化，腔室的大小都相同，图标将与腔室位于同一位置。

使用HTML / CSS定位图像

4 个答案: