html - 文本不以响应式背景图像为中心

Question

我检查了相关帖子的答案，但没有帮助。我想让文本在响应式背景图片的顶部居中 - 仅在可能的情况下使用 CSS。

/*beginning of styling for background img per smashing mag article*/

.hero {
    position: relative;
}
 .hero #page1img {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    font: 0/0 serif;
    text-shadow: none;
    color: transparent;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.hero #page1img .inner {
    padding-top: 64.700855%; /* 757px h divided by 1170w width/height of image */
    display: block;
    height: 0;
}

/*end of styling for background img per smashing mag article*/

h3 .intro-lead-in {
    padding-top: 100px;
    text-align: center;
    font-family: 'Josefin Slab', serif;
    font-style: italic;
    font-size: 22px;
}

h1 .intro-heading {
    display: inline-block;
    text-align: center;
    font-family: 'Spinnaker', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 50px;
}

/* beginning of media queries for background image per smashing mag article*/

/* default screen, non-retina */
.hero #page1img { background-image: url("https://s9.postimg.org/6c1bhr9u7/header-970px-wide.jpg"); }

    @media only screen and (min-width: 321px) and (max-width: 538px) {
        /* Medium screen, non-retina */
        .hero #page1img { background-image: url("../img/header-538px-wide.jpg"); }
    }

    @media only screen and (max-width: 320px) {
        /* Small screen, non-retina */
        .hero #page1img { background-image: url("../img/header-290px-wide.jpg"); }
    }
      
/* end of media queries for background image per smashing mag article*/

<div class= "row">
		<div class= "col-12">
			<div class="hero">
				<h3 class="intro-lead-in">Welcome to our Club!</h3>
				
				<h1 class="intro-heading">It's Nice to Meet You</h1>
				
				<span id="page1img" aria-label="MacGregor boats">
						<span class="inner"></span>

方法取自 Stephen Thomas 在 Smashing Magazine 上的文章。此处实现/工作的文章演示:http://sathomas.me/continental/

这是我的第一个问题，如果我没有把它发布得非常正确，我深表歉意。欢迎提出改进建议!

Answer 1

我假设您希望文本层叠在图像之上，水平和垂直居中。

这是一种无需更改大量代码的快速方法。更改的 CSS 在 text 类(我制作的 div 的类)中。我基本上只是绝对定位它，然后是英雄 div 顶部的 40%。颜色变化只是为了让示例图片上的文字更清晰。

我将文本包裹在一个 div 中，以便于定位。

/*beginning of styling for background img per smashing mag article*/

.hero {
  position: relative;
}

.hero #page1img {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.hero #page1img .inner {
  padding-top: 64.700855%;
  /* 757px h divided by 1170w width/height of image */
  display: block;
  height: 0;
}


/*end of styling for background img per smashing mag article*/

h3 .intro-lead-in {
  padding-top: 100px;
  text-align: center;
  font-family: 'Josefin Slab', serif;
  font-style: italic;
  font-size: 22px;
}

h1 .intro-heading {
  display: inline-block;
  text-align: center;
  font-family: 'Spinnaker', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 50px;
}

.text {
  position:absolute;
  text-align:center;
  width:100%;
  top:40%;
  color:#fff;
  
}


/* beginning of media queries for background image per smashing mag article*/


/* default screen, non-retina */

.hero #page1img {
  background-image: url("https://s9.postimg.org/6c1bhr9u7/header-970px-wide.jpg");
}

@media only screen and (min-width: 321px) and (max-width: 538px) {
  /* Medium screen, non-retina */
  .hero #page1img {
    background-image: url("../img/header-538px-wide.jpg");
  }
}

@media only screen and (max-width: 320px) {
  /* Small screen, non-retina */
  .hero #page1img {
    background-image: url("../img/header-290px-wide.jpg");
  }
}


/* end of media queries for background image per smashing mag article*/

<div class="row">
  <div class="col-12">
    <div class="hero">
      <div class="text">
        <h3 class="intro-lead-in">Welcome to our Club!</h3>
        <h1 class="intro-heading">It's Nice to Meet You</h1>
      </div>
      <span id="page1img" aria-label="MacGregor boats">
        <span class="inner">
        </span>
      </span>
    </div>
  </div>
</div>