1

次のようなマークアップがあります。

<div style="width: 150px; height: 250px;">
    <img src="Image1.jpg" />

    <div class="YellowExclaimIcon iconsBlack"></div>
</div>

私が達成したいことは以下の通りです：

結果

つまり、画像は常に親 div の中央 (水平方向と垂直方向の両方) に配置し、警告アイコンは画像の上に右と下に 5 のマージンを付けて配置する必要があります。

もう 1 つの注意点は、画像の幅と高さが常に同じであるとは限らず、警告アイコンの位置は常に正しい場所である必要があることです。

YellowExclaimIcon クラスには背景画像が含まれていますが、必要に応じて画像に変更できます。考慮すべきことは、画像にも最大幅と最大高さがあることです。

このスレッドCSS Help - div over imageで答えを試してみましたが、センタリングで機能させることができませんでした。

4

4 に答える 4

5

画像の幅と高さが可変の場合、次のようにマークアップを変更した場合にのみこれを実現できます。

<style type="text/css">
    div.container {
        width:150px; height:250px; display:table-cell; vertical-align:middle; 
        text-align:center; background-color:#ededed}
    div.image {
        position:relative; display:inline-block; }
    div.image img {
        display:block; }
    div.YellowExclaimIcon {
        position:absolute; width:80px; height:80px; bottom:5px; right:5px; 
        background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>

<div class="container">
    <div class="image">
        <img src="Image.jpg" alt="" />
        <div class="YellowExclaimIcon"></div>
    </div>
</div>

上記のサンプルでは、​​常に水平方向と垂直方向に画像を中央に配置し、アイコンを右下隅に 5 ピクセルのマージンで配置します。

実際のサンプルを確認してください: http://jsfiddle.net/Q9uhV/

于 2013-01-10T10:41:16.420 に答える
2

position:relative外側の div とabsolute内側の div に使用

HTML

    <div class="outer">

    <div class="YellowExclaimIcon"></div>
</div>

CSS

 .outer{
  width: 150px; height: 250px; 
  border:solid red 1px;
  position:relative;
  vertical-align:middle;
  background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{  
  position:absolute;
  width:100%;
  height:100%;
  top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}

デモ

于 2013-01-10T09:18:29.593 に答える
0

z-index と次のような配置を使用する必要があります。

<div style="width: 150px; height: 250px;">
    <img src="Image1.jpg" style="z-index:-1" />

    <div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>

..たとえば、マージンを必要なものに設定します。

于 2013-01-10T09:20:44.480 に答える
0

警告画像を作成absoluteして、指定した場所で他の画像の上に配置できるようにします。

HTML:

<div class="container">
  <img src="penguin.png" />
  <img class="warning" src="warning.png" />
</div>

CSS:

.warning {
  position:absolute;
  left:80px;
  top:80px
}

デモについては、この jsFiddleを参照してください。

于 2013-01-10T09:24:21.140 に答える