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

あなたの質問から、これらの 4 つの画像をどのように正確に配置したいかを補うことはできませんが、親 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 に答える