我搜索了几个小时,但没有找到解决问题的方法。
我想将两张图片叠加到另一张图片上,尽管有数十个关于此的教程,但我没有到达适用于我的案例。
我能够通过这些教程看到,CSS 有一个允许在背景图像中使用的属性“z-index”。我也可以看到绝对和相对位置属性,但我不确定我的问题的解决方案是否与这些属性有关。
这是我想要解决问题的代码部分:
<img src='schema.png'>
<a href="#"><img src='Linkedin.png' width="30" height="30" ></a>
<a href="#"><img src='twitter.png' width="30" height="30" ></a>
这是我的完整 html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menuStyle.css" />
<title>Antoine</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<h1>Titre</span></h1>
<h2>Sous titre</h2>
<br>
</div>
</header>
<ul id="nav" style="clear:both;">
<li><a href="#">menu 1 ?</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
<img src='schema.png'>
<a href="#"><img src='Linkedin.png' width="30" height="30" ></a>
<a href="#"><img src='twitter.png' width="30" height="30" ></a>
<ul id="footer">
<br>
<li><a href="#">Plan du site</a></li>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Nous contacter</a></li>
<ul>
</div>
</body>
预先感谢您的帮助。
原文由 Millet Antoine 发布,翻译遵循 CC BY-SA 4.0 许可协议
如果你想将一张图片叠加在另一张图片上,你只需要让第二张图片有一个绝对位置,并用 z-index 确定哪一张在上面,就像这样: