如何在没有文字的情况下上下显示图像[关闭]答案

【问题标题】：How to show image over text without text up and down [closed]如何在没有文字的情况下上下显示图像[关闭]
【发布时间】：2019-08-01 23:03:40
【问题描述】：

我有一个故事段落，我希望当用户点击屏幕时，所有段落单词都应该被隐藏，一个单词应该像马、孩子等一样保留。请看下面的视频链接以更好地理解。

用户点击前的段落。

当用户点击屏幕时，会显示图片，并且会保留一个相关的图片词。

视频链接： https://www.loom.com/share/2ff658bb47d3491e9924f35424480cd5

.pic {
  position: relative;
}

.pic:before {
  content: '';

  /* center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* scale */
  background-size: 200px;

  width: 350px;
  height: 200px;

  /* hide */
  /*visibility: hidden;*/
  opacity: 0;
  transition: visibility 1.5s ease, opacity 1.5s ease;
}

#story_div:active .pic:before {
  visibility: visible;
  opacity: 1;
}

.pic.horse:before {
  background-image: url('stories/hourse.jpeg');
  background-repeat: no-repeat;
  /*background-size: 300px 200px;*/
}

<div id="story_div" class="member-detail-wrap" style="height:500px">
  <div class="sqs-block-content">
    <p id="story">

    <span class="pic horse"> A small horse came to the farm, Sam wanted to play with the </span> horse <span class='pic farm'> but the horse was scared of sam.</span>

     </p>
    </div>
 </div>

【问题讨论】：

请明确定义您的问题。您已经概述了一项任务，但实际上并没有询问任何事情。
我现在明白了这个问题，但问题出在哪里，您尝试了什么？
请检查我需要的视频和这个一样
@SalmanIqbal 用户不必导航到外部 URL 即可了解您的问题。您的问题应该对未来的读者有用。如果该链接断开，您的问题将变得毫无用处。如果您的问题完全依赖于该链接，那么它就是题外话。您可以使用该链接来补充您的问题，但没有它我们应该能够理解和回答。很清楚你想要什么，但不是你要求。
@TylerRoper 我会改进我的问题，感谢您的反馈

标签： css css-selectors

【解决方案1】：

您错过了隐藏文本所需的 CSS。我添加了下面的代码来隐藏文本。

#story_div:active .pic {
  visibility: hidden;
}

请检查以下答案。

片段：

.pic {
  position: relative;
}

.pic:before {
  content: '';
  /* center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* scale */
  background-size: 200px;
  width: 350px;
  height: 200px;
  /* hide */
  /*visibility: hidden;*/
  opacity: 0;
  transition: visibility 1.5s ease, opacity 1.5s ease;
}

#story_div:active .pic:before {
  visibility: visible;
  opacity: 1;
}

#story_div:active .pic {
  visibility: hidden;
}

.pic.horse:before {
  background-image: url('https://via.placeholder.com/300x200.jpeg?text=image');
  background-repeat: no-repeat;
  /*background-size: 300px 200px;*/
}

<div id="story_div" class="member-detail-wrap" style="height:500px">
  <div class="sqs-block-content">
    <p id="story">

      <span class="pic horse"> A small horse came to the farm, Sam wanted to play with the </span> horse <span class='pic farm'> but the horse was scared of sam.</span>

    </p>
  </div>
</div>

【讨论】：