gpt4 book ai didi

html - 在 HTML 和 CSS 中分层和定位图像

转载 作者:太空宇宙 更新时间:2023-11-04 16:07:53 25 4
gpt4 key购买 nike

我正在使用 HTML 和 CSS 创建一个简单的游戏。我有一条小巷的背景图片,我正在尝试在此背景之上添加图片作为游戏中的线索。我在将它们定位在顶部时遇到了一些困难。

我目前正在处理的元素是一把 Dagger 的 PNG 图像,我想将其放置在小巷背景图像的顶部。任何帮助,将不胜感激。网址是here

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

最佳答案

您想 position: absolute Dagger ,使其位于图片顶部

更新

您想position: relative .backing 然后position: absolute 两个图像( Dagger 和场景)在它上面。

关于html - 在 HTML 和 CSS 中分层和定位图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8817673/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com