/* 图像样式 */
img {
display: block; /* 将图片显示为块级元素 */
width: 100%; /* 宽度填充父元素 */
}
/* 标题样式 */
h2 {
font-size: 24px; /* 字体大小 */
margin-top: 20px; /* 与前面元素的距离 */
margin-bottom: 0; /* 与后面元素的距离 */
text-align: center; /* 标题居中 */
}
/* 图像容器样式 */
.image-container {
position: relative; /* 相对定位 */
max-width: 800px; /* 图像容器最大宽度 */
margin: 0 auto; /* 水平居中 */
}
/* 标题容器样式 */
.title-container {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
background-color: rgba(0, 0, 0, 0.5); /* 背景颜色透明度 */
width: 100%; /* 宽度填充父元素 */
color: #fff; /* 字体颜色 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 边框和内边距不增加元素宽度 */
}以上代码片段展示了一种美观的图像标题设计方案，该设计为图像和标题分别放置在各自的容器中。通过设置图像容器为相对定位，标题容器为绝对定位，并将标题容器放置在图像容器之下，大家可以实现这种图像标题的效果。
标题容器的背景色使用了半透明颜色 rgba()，这使得标题能够覆盖图像的底部，而不会完全遮挡住整个图像。此外，标题容器还包括一个内边距，以使标题与边框之间留有足够的空间。
在实现图像标题的设计过程中，大家需要注意图像及其容器的大小，避免过大或过小影响布局。