html - 图片点击自定义文本位置

Question

有谁知道点击图片后如何定位文字

我在下面附上了一张我希望它如何显示的图片，

function showSpoiler(obj) {
  var inner = obj.parentNode.getElementsByTagName("div")[0];
  if (inner.style.display == "none")
    inner.style.display = "";
  else
    inner.style.display = "none";
}

body,
input {
  font-family: "Trebuchet ms", arial;
  font-size: 0.9em;
  color: #333;
  position: absolute;
  top: 1em;
}

.spoiler {}

.spoiler .inner {}

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

Answer 1

• 对于初学者，您可以将 .inner 类 div 放在图像上方。
• 在 .inner 类上使用绝对定位，因此在显示 .inner 时图像不会向下移动并将其对齐到中心。
• 将图像从顶部移开一些边距，为文本腾出一些空间。
• 要在解锁和锁定之间切换，您可以使用标记/计数变量，它会在每次点击时更改值。

.

.spoiler {
  background: black;
  width: 100%;
  position:relative;
}

.spoiler img {
  margin-top: 60px;
  background: black;
  width: 100%;
}

.spoiler .inner {
font-size:20pt;
position:absolute;
color:white;
top:5px;
width:100%;
text-align:center;
}

var count=0;
function showSpoiler(obj) {
  var inner = obj.parentNode.getElementsByTagName("div")[0];
  if (count==0){
  inner.textContent = "UNLOCK";
  setTimeout(function(){inner.textContent = "";},2000);
  count=1;
  } 
  else{
  inner.textContent = "LOCK";
  setTimeout(function(){inner.textContent = "";},2000);
  count=0;
  }
    
}

body,
input {
  font-family: "Trebuchet ms", arial;
  font-size: 0.9em;
  color: #333;
  position: absolute;
  top: 1em;
}

.spoiler {
  background: black;
  width: 100%;
  position:relative;
}

.spoiler img {
  margin-top: 60px;
  background: black;
  width: 100%;
}

.spoiler .inner {
font-size:20pt;
position:absolute;
color:white;
top:5px;
width:100%;
text-align:center;
}

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