Question

我有两个使用基础的列，唯一能够像我想要的那样将图像送到网站的是以下代码和css。我的问题是我无法将文字和信息放在图像的顶部并保持中心。

到这里https://www.battlefield.com/，在介绍部分下面，我想要完成这两个专栏。

我已经尝试过flex并阻止，如果图像设置为列的背景，它没有按我的意愿响应

   .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;
}

响应时的位置背景和文字

2 个答案: