Question

我希望将图像放在具有固定背景的div的顶部。我正在使用CSS来设置div以及位于背景顶部的图像，但我没有看到我期望的结果。位于div背景图像顶部的图像不会根据我的像素设置进行调整。

这是我的HTML：

<div class="colorpicker" id="colorpicker">
    <img src="images/color_unselected.png" class="unselected" />
    <img src="images/color_C.png" class="c_image" />
    <img src="images/color_K.png" class="k_image" />
    <img src="images/color_M.png" class="m_image" />
    <img src="images/color_Y.png" class="y_image" />
</div>

这是我的CSS：

#colorpicker{
    border: 0px;
    width: 63;
    height: 342;
    position: relative;
    margin: 0px auto;
    margin-left: 1002px;
    background-image: url(images/color_tab_container.png);
    background-repeat: no-repeat;
}
#colorpicker.unselected{
    top: 50px;
    right: 25px;
}

Answer 1

我无法从你的问题中解释出你想要如何定位这四个图像，但我会为你的图像制作一个选择器而不是父div：

HTML：

<div class="colorpicker" id="colorpicker">
  <img src="images/color_unselected.png" class="unselected">
  <img src="images/color_C.png" id="c_image" class="image" />
  <img src="images/color_K.png" id="k_image" class="image" />
  <img src="images/color_M.png" id="m_image" class="image" />
  <img src="images/color_Y.png" id="y_image" class="image" />
</div>

的CSS：

img.image {
  /*whatever you want to do here*/
}
#colorpicker {
  border: 0px;
  width: 63;
  height: 342;
  position: relative;
  margin: 0px auto;
  margin-left: 1002px;
  background-image: url(images/color_tab_container.png);
  background-repeat: no-repeat;
}
#colorpicker.unselected{ top: 50px; right: 25px; }

旁注：您可以在此处输入/复制粘贴代码，选择并按上面的“代码示例”按钮。如上所示，这将正确显示（确保您分别为html和css执行此操作）： - ）

Answer 2

要使图像“堆叠”，在此之间有一个边距，请添加以下CSS：

#colorpicker img {
    display: block;
    margin-bottom: 2px;
}

有关工作示例，请参阅http://jsfiddle.net/KX5mS/。

CSS：将图像定位在Div中

2 个答案: