HTML一个图片放在另一个图片里面并且写一个h1标题在里面的图片右边
时间: 2024-09-23 20:02:58 浏览: 27
要在HTML中将一个图片嵌套在另一个图片内,并在其旁边添加一个H1标题,可以使用`<figure>`、`<img>`以及`<figcaption>`元素。下面是一个示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图片嵌套示例</title>
</head>
<body>
<figure>
<img src="外层图片src" alt="外层图片描述"> <!-- 外层图片 -->
<div class="nested-image-container">
<img src="内层图片src" alt="内层图片描述"> <!-- 内层图片 -->
</div>
<figcaption>
<h1>图片右侧标题</h1>
</figcaption>
</figure>
<style>
.nested-image-container {
position: relative;
width: 100%;
max-width: 300px; /* 控制内层图片的最大宽度 */
}
.nested-image-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</body>
</html>
```
在这个例子中,`<figure>`包含了一个`<img>`作为外层图片和一个包含`<img>`和`<h1>`的`<figcaption>`。`.nested-image-container`用于定位内层图片,使其居于外层图片中央。`<h1>`标签放置在`<figcaption>`里,作为标题显示。