HTML -, CSS - Bild im Bild, wie zu tun?

Habe ich dieses Stück HTML-code:

<div>
  <div>
    <image src="image-inside-pic-png.png" alt="">
  </div>
  <image src="pic.png" alt="" />
</div>

Den Abb.png (300x300 px) ist das Haupt-Bild. Ich würde gerne die Bild-Insider-pic-png.png (20x20 px) innerhalb der it. Wenn ich position: absolute; auf das kleine Bild, es funktioniert auch nur vorübergehend.
Wenn ich die Größe ändern entweder, es funktioniert nicht mehr.

Also meine Frage ist, wie kann ich bewegen Sie das kleine Bild immer in der großen Bild - und dieses kleine Bild wird immer 15px von oben und 30px am rechten Rand des großen Bildes?

Danke für die Hilfe

  • klingt wie Sie verwenden ein Hintergrundbild, das sollte sich per CSS. Ist image-inside-pic-png.png Teil des Inhalts, oder ist es einfach verwendet, für Stil?
  • <img>, nicht <image>.
InformationsquelleAutor user984621 | 2012-02-16
  1. 7

    Ohne änderung des Markups dies kann erreicht werden, z.B. mit display:inline-block an die äußerste div-element (damit es nicht zu verlängern, für 100% der verfügbaren Breite) und position relative + absolute für die Regionen in äußerster div und thumbnail

    sehen diese Geige: http://jsfiddle.net/cRqhT/3/

    border und image-Größe festgelegt werden, um die Einfachheit

    InformationsquelleAutor fcalderan
  2. 8

    Ich denke, das sollte funktionieren:

    HTML:

    <div>
  <img src="image-inside-pic-png.png" alt="" class="inner-image"/>
  <img src="pic.png" alt="" />
</div>

    CSS:

    div {
  position: relative;
}

.inner-image {
  position: absolute;
  top: 15px;
  right: 30px;
}

    Jedenfalls, stellen Sie sicher, dass Sie brauchen, um dies zu tun mit HTML. Vielleicht ist es besser, einfach das Bild Bearbeiten mit Photoshop oder Gimp. Oder vielleicht ein Bild, es ist nur für styling Zwecke, dann sollten Sie den Einsatz von CSS.

    InformationsquelleAutor Waiting for Dev...
  3. 0

    legen Sie beide Bilder in einem div, welches position verwendet:relatvie, dann bewerben position:absolute Bilder, und stellen Sie den Wert ein, wie Sie benötigen.

    InformationsquelleAutor Qishan
Schreibe einen Kommentar