单击图像上的自定义文本位置

Question

有没有人知道如何在点击图像后将文字定位在图像上

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

＆＃13;

＆＃13;

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

＆＃13;

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

.spoiler {}

.spoiler .inner {}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

.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>