0

我正在寻找将图像放置在具有固定背景的 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;
}
4

2 回答 2

3

我无法从你的问题中弥补你想要如何定位这四个图像，但我会为你的图像而不是父 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 执行此操作）:-)

于 2012-05-23T13:31:35.547 回答
0

要将图像“堆叠”，并在两者之间留有边距，请添加以下 CSS：

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

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

于 2012-05-23T13:53:38.410 回答