HTML，CSS - 圖像內部圖像，如何做到這一點？

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

的pic.png（300×300像素）是主圖像。我想將image-inside-pic-png.png（20x20像素）放在裏面。當我申請職位：絕對;在小圖像上，它只能暫時工作。如果我改變其大小，它不再有效。

所以我的問題是，我怎麼能在大圖像總是移動小的圖像 - 這小的圖像將永遠15px的從頂部和從大圖像的右邊緣30PX？

謝謝大家幫忙

2012-02-16 user984621

聽起來像你使用的背景圖像，應該通過CSS設置。是'image-inside-pic-png.png'內容的一部分，還是僅僅用於樣式？ – zzzzBov 2012-02-16 14:33:54

''，而不是''。 – 2012-02-16 14:39:19

在不改變標記的情況下，可以實現例如使用display:inline-block到最外div元素（因此它不會對可用寬度的100％延伸）和用於最外的div和縮小圖位置relative + absolute

看到此小提琴：http://jsfiddle.net/cRqhT/3/
邊界和圖像尺寸是爲了簡單

定義

2012-02-16 14:32:42 fcalderan

我認爲這應該工作：

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; 
}

無論如何，確保你需要做到這一點HTML。也許最好只用Photoshop或Gimp編輯圖像。或者，也許只有一個圖像只用於造型目的，那麼你應該使用CSS。

2012-02-16 14:31:49

將兩個圖像放在一個div中，使用position：relatvie，然後將position：absolute應用於圖像，並根據需要調整該值。

2012-02-16 14:37:12 Qishan

回答