响应时定位背景和文本

Question

我有 2 个使用基础的专栏，唯一可以按照我想要的方式将图像放到网站上的是以下代码和 css。我的问题是我无法将文字和信息置于图像之上并保持居中。

转到此处 https://www.battlefield.com/，在介绍部分下，这两列是我要完成的。

我试过 flex 和 block，如果图像被设置为列的背景，它没有按我想要的方式响应

   .what{
        max-height: 428px;
     height: 100%;
     overflow: hidden;
    }

    .nopad{
     padding: 0px;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet"/>
    <body>
    <div class="row expanded">
     <div class="columns medium-6 what nopad"><img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel/backgroundImage/image/xlarge.img.jpg"></div>
     <div class="columns medium-6 what nopad"><img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel_0/backgroundImage/image/xlarge.img.jpg">
      </div> 
  </div>
    </body>

Answer 1

您可以使用 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 使元素在图像上居中。

.what {
  max-height: 428px;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.nopad {
  padding: 0px;
}

.info {
   position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.5);
  padding: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" rel="stylesheet" />

<body>
  <div class="row expanded">
    <div class="columns medium-6 what nopad">
      <img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel/backgroundImage/image/xlarge.img.jpg">
      <p class="info">text</p>
    </div>
    <div class="columns medium-6 what nopad">
      <img src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_jcr_content/par/panelgrid/panels/panel_0/backgroundImage/image/xlarge.img.jpg">
      <p class="info">text</p>
    </div>
  </div>
</body>

Answer 2

您可以尝试使用 z-index 将文本置于图像之上：

.text {
  z-index: 100;
}
img {
  z-index: -1;
}

响应时定位背景和文本

postion background and text when going responsive

html

css

zurb-foundation