Question

我想将文字从图像上移到手机上的图像下方显示。使用

显示图像

    <article class="post-featured post-6792 post type-post status-publish has-post-thumbnail hentry category-tech format-standard mobile-video post-visible" style="background-image: url(http://theoldcontinent.mgtestsite.com/wp-content/uploads/2017/07/Schermafbeelding-2017-07-10-om-18.54.13-530x300.jpg);" data-video="http://www.youtube.com/watch?v=GnfNta6SosA">
<div class="overlay-container">

<div class="overlay-content">
  <h2 class="entry-title">Kermit the Frog (Jordan Peterson) telling you to clean your room</h2>
</div>

目前.overlay-content正在移动视频上显示。如果我使用

将其向下移动

 .overlay-content {
        top: 300px;
        background-color: #fff; 
        color: #000;
    }

然后隐藏起来并且没有显示。如果您向下滚动到第4个文本 - Kermit the frog，您只能在移动设备上查看此问题http://theoldcontinent.mgtestsite.com/ 如何在图像下创建空间以显示文本（Wordpress网站）

Answer 1

margin-top: 195px;工作并解决了问题

在图像下显示文本代替叠加

1 个答案: