在HTML和CSS中對圖像進行分層和定位

Question

我正在使用HTML和CSS創建一個簡單的游戲。 我有一條小巷的背景圖片，我試圖在此背景上添加圖片，作為游戲中的線索。 我在將它們放置在頂部時遇到一些困難。

我目前正在處理的元素是匕首的PNG圖片，我想將其放置在小巷背景圖片的頂部。 任何幫助，將不勝感激。 該網站在這里

HTML代碼-

<body>
    <div id="logo">
        <img src="images/key.jpg"  width="3%" height="3%"/>
    </div>    

    <a href="abduction.html" class="back">Back</a>
    <a href="scene2.html" class="next">Next</a>

    <div class="backing">
        <img src="images/scene1.jpg"  width="600" height="600"/>
    </div>

    <img src="images/dagger.png" width="10%" height="10%" id="dagger" />

    </body>
</html>

CSS代碼-

.backing img {
    position:relative;
    z-index:-10;
    float:left;
    margin-left:12%;
    /* box-shadow: inset 0 0 50px 50px  #FFF;
    -moz-box-shadow: inset 0 0 50px 50px  #FFF;
    -webkit-box-shadow: inset 0 0 50px 50px  #FFF; */
    -moz-border-radius-: 50px;
    border-radius: 50px;
    margin-bottom:5%;
    margin-top:1%;
}

.next {
    position:relative;  
    margin-left:2%;
    z-index:200;
}

.back {
    position:relative;
    margin-left:32%;
    z-index:220;

}

#dagger {
    position:relative;
    z-index:300;
}

Answer 1

您要position: absolute是匕首，以便它位於圖片上方

更新資料

您要position: relative對於.backing ，然后position: absolute兩個圖像（匕首和場景）都放在其頂部。

在HTML和CSS中對圖像進行分層和定位

問題描述

1 個解決方案

解決方案1
1 已采納 2012-01-11 10:25:44

在HTML和CSS中對圖像進行分層和定位

問題描述

1 個解決方案

解決方案1 1 已采納 2012-01-11 10:25:44

解決方案1
1 已采納 2012-01-11 10:25:44