将图像和文本放在另一个图像之上答案

【问题标题】：Have image and text on top of another image将图像和文本放在另一个图像之上
【发布时间】：2018-02-14 06:22:30
【问题描述】：

所以这是我的目标，我想将图像（也就是我的徽标）放在另一个基本上是背景的顶部。所以背景图像上有徽标和一些文本，两者都居中。现在这是我的问题，因为我将位置设置为相对和绝对，当我调整窗口大小时，我的图像没有响应，这意味着徽标和文本不再居中。

所以我必须做的就是将文本和徽标放在一个 div 中，并将该 div 的背景作为另一个图像（在 css 中使用 background-url）作为另一个图像背景，但这并不高效。所以到目前为止我有这个：

#pictures {
  width: 100%;
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 100px;
  background: url('http://cdn-s-www.lalsace.fr/images/3CC1D55D-083C-44F1-B484-2D315D21D529/JDE_V0_07/(disney).jpg');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

#logo {
  width: 30%;
  height: auto;
  padding-top: 20px;
  background: none !important;
}

#line1 {
  font-size: 30px;
  color: white;
  text-align: center;
  padding-top: 40px;
  margin-bottom: 4%;
  letter-spacing: 0.1em;
  -webkit-text-stroke: 1px white;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: 'IM Fell Double Pica', serif;
}

#line2 {
  font-size: 30px;
  color: white;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-text-stroke: 1px white;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: 'IM Fell Double Pica', serif;
}

<div class=" ui centered grid">
  <div id="pictures" class="ui containcer">
    <h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
    <img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
    <h1 id="line2">Sophomores Leaders Impacting, Developing, and Educating</h1>
  </div>
</div>

所以这是我的问题：如何在不使用 background-url 属性的情况下解决响应问题（所以只在 myhtml 中有 img 标签）？仅供参考，我使用的是语义 UI 而不是 Bootstrap。

【问题讨论】：

标签： html css semantic-ui

【解决方案1】：

首先，我想提一下，这将是 css 网格的一个很好的用途。但是要回答您的问题并从您开始的内容中恢复过来。为了使您的图像在不使用背景的情况下具有响应性，您需要它们具有宽度：100% 和高度：自动。我稍微修改了您的代码以表明这可以解决您的问题。请注意，我创建了一个具有相对位置的 wraper 类和一个具有绝对位置的 inner 类。 inner 类包含您的文本，并且可以 text-align: center here。您的文字和徽标现在将位于图像顶部并居中。您将需要媒体查询来更改文本大小以适应较小屏幕上的图像。如果您想垂直对齐您的内部类，您可能需要查看此链接：http://vanseodesign.com/css/vertical-centering/ 了解更多详细信息。

    .res-image {
       width: 100%;
       height: auto;
    }
    #logo {
       width: 30%;
       height: auto;
       padding-top: 20px;
    }

   #line1 {
       font-size: 30px;
       color: white;
       padding-top: 40px;
       margin-bottom: 4%;
       letter-spacing: 0.1em;
       -webkit-text-stroke: 1px white;
       text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 
       1px 0 #000, 1px 1px 0 #000;
       font-family: 'IM Fell Double Pica', serif;
   }

   #line2 {
       font-size: 30px;
       color: white;
       letter-spacing: 0.1em;
       -webkit-text-stroke: 1px white;
  }

<div class="wrapper ui centered grid">
    <img class="res-image" src="https://image.ibb.co/gjfJAR/DSC_0041.jpg">
    <div class="inner ui containcer">
        <h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
        <img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
        <h1 id="line2">Sophomores Leaders Impacting, Developing, and 
        Educating</h1>
    </div>
</div>

【讨论】：