点击图片后如何定位文本？附示例代码与效果需求

我来帮你搞定这个需求！核心思路是用CSS的相对+绝对定位让文本直接叠加在图片上，具体修改如下：

1. 调整CSS样式（关键改动） #

先修改样式，让文本容器能精准定位在图片上方：

/* 全局样式移除不必要的绝对定位，避免打乱页面布局 */
body, input { 
    font-family: "Trebuchet ms", arial; 
    font-size: 0.9em; 
    color: #333;
}

/* 图片容器设为相对定位，作为内部文本的定位基准 */
.spoiler {
    position: relative;
    display: inline-block; /* 让容器只包裹图片大小，不占满整行 */
}

/* 文本容器设为绝对定位，覆盖在图片上 */
.spoiler .inner {
    position: absolute;
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 让文本真正居中对齐 */
    background-color: rgba(0,0,0,0.7); /* 半透明黑背景，提升文本可读性 */
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    display: none; /* 默认隐藏 */
}

2. 优化JavaScript逻辑（更简洁精准） #

你的原有逻辑没问题，这里可以简化写法，让代码更清晰：

function showSpoiler(obj) {
    const inner = obj.nextElementSibling; // 直接获取相邻的文本容器，比标签选择器更精准
    inner.style.display = inner.style.display === "none" ? "block" : "none";
}

3. HTML结构无需改动 #

直接沿用你原来的结构即可：

<div class="spoiler"> 
    <img onclick="showSpoiler(this);" src="http://konpakuto.com/logo.jpg" /> 
    <div class="inner"> This is a spoiler! </div> 
</div>

效果说明 #

• 点击图片后，文本会居中显示在图片上方，半透明背景既不遮挡图片细节，又能让文本清晰可读
• 再次点击图片，文本会隐藏回初始状态
• 如果想调整文本位置，只需修改.inner的top、left值就行（比如top: 10px; left: 10px;可让文本显示在图片左上角）

内容的提问来源于stack exchange，提问作者harry