Question

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

所以我必须做的是，将文本和徽标放在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标签）？而且我正在使用Semantic UI而不是Bootstrap。

Answer 1

首先，我想提一下，这将是css网格的一个很好的用途。但要回答你的问题，并从你已经开始的东西中接受。为了在不使用背景的情况下使图像响应，您需要它们具有宽度：100％和高度：自动。我修改了你的代码，以表明这可以在你的问题中工作。注意我创建了一个 wraper 类，其位置为relative，而 inner 类的位置为absolute。内部类包含您的文本，并且可以在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>

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

1 个答案: